谷歌图表API的敲除自定义绑定 - 访问被拒绝

Question

我一直在尝试如何做到这一点几天，以及谷歌搜索一个内置的解决方案，但可悲的是没有成功。

我正在构建一个定制电子商务产品的管理部分。该管理区域完全构建为SPA（单页应用程序），可通过AJAX调用动态加载“ko”模板及其数据。

现在，问题在于我希望在此ko模板中包含Charts，Pies和其他数据可视化元素（即在图形上在Dashboard模板中很好地显示的Summarized数据）。

为此，我正在为正确调用Google Chart API的'KO自定义绑定'工作。

这是我到现在为止，创建一个固定的表（从适应KO：this sample）

ko.bindingHandlers.googleChart = { 
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 

    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(function() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Revenue'); 
     data.addColumn('number', 'Average Revenue'); 
     data.addRows([ 
      ['2004', 1000, 630], 
      ['2005', 1170, 630], 
      ['2006', 660, 630], 
      ['2007', 1030, 630] 
     ]); 

     var options = { 
      title: 'Revenue by Year', 
      seriesType: "bars", 
      series: { 1: { type: "line" } }, 
      vAxis: { 
       title: 'Year', 
       titleTextStyle: { color: 'red' } 
      }, 
      colors: ['red', 'black'] 
     }; 

     var chart = new google.visualization.ComboChart($(element)); 
     chart.draw(data, options); 
    }); 
}}; 

然后，从模板，我称之为结合，通过“假”现在，或者viewModel中的任何虚拟ko.observable。

<script type="text/html" id="dashboard-admin-template"> 
    <div data-bind="googleChart: false"></div>  
</script> 

现在，终于（对不起了这么久），我遇到的问题：

后，google.load("visualization", "1", { packages: ["corechart"] });的“元素”的内容无法访问（无法从我的IDE后捕获因为我是名誉事务上的新手），使回调失败，而不是渲染图表。在调用'google.load'之前，'元素'的内容都在那里，并且是可访问的。当回调被调用时，获得Javascript runtime error: Access is denied。

希望得到一些帮助，因为我被困在这一个。谢谢！ Luis

Answer 1

让我重申正确的答案。

1. 就拿google.load("visualization"...了自定义代码
2. 避免调用google.setOnLoadCallback(function()...本身直接执行内部代码。

这里是如何结合现在看起来...

google.load("visualization", "1", { packages: ["corechart"] }); 
ko.bindingHandlers.googleChart = { 
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 

    //TODO: load & handle visualization data using the 'valueAccessor' 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Revenue'); 
    data.addColumn('number', 'Average Revenue'); 
    data.addRows([ 
     ['2004', 1000, 630], 
     ['2005', 1170, 630], 
     ['2006', 660, 630], 
     ['2007', 1030, 630] 
    ]); 

    var options = { 
     title: 'Revenue by Year', 
     seriesType: "bars", 
     series: { 1: { type: "line" } }, 
     vAxis: { 
      title: 'Year', 
      titleTextStyle: { color: 'red' } 
     }, 
     colors: ['red', 'black'] 
    }; 

    var chart = new google.visualization.ComboChart(element); 
    chart.draw(data, options); 
}}; 

希望这有助于任何你工作的一个类似的事情的！