2

几天来，我一直在尝试如何做到这一点，并在谷歌上搜索构建的解决方案，但遗憾的是没有成功。

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

现在，手头的问题是我想在这个 ko 模板中包含图表、饼图和其他数据可视化元素（即在仪表板模板中很好地显示在图表上的汇总数据）。

为此，我正在为Google Chart API开发一个“KO 自定义绑定”，该 API正在被正确调用。

这是我到目前为止所拥有的，它创建了一个固定的图表（适用于 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);
    });
}};

然后，从模板中，我调用绑定，现在传递“false”，或者来自 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在回调被调用时得到一个。

希望能得到一些帮助，因为我被困在这个问题上。谢谢！路易斯

4

1 回答 1

2

让我重申正确的答案。

  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);
}};

希望这对从事类似工作的任何人有所帮助！

于 2013-01-22T00:43:40.870 回答