2

私はこれを行う方法を数日間試し、構築されたソリューションを探しましたが、残念ながら成功しませんでした。

カスタムメイドのeコマース製品の管理セクションを作成しています。この管理領域は、完全にSPA（シングルページアプリケーション）として構築されており、AJAX呼び出しを介して「ko」テンプレートとそのデータを動的にロードします。

さて、当面の問題は、このkoテンプレート内にグラフ、円、およびその他のデータ視覚化要素を含めたいということです（つまり、ダッシュボードテンプレートでグラフにうまく表示された要約データ）。

このために、適切に呼び出されるGoogleChartAPIの「KOカスタムバインディング」に取り組んでいます。

これは私が今まで持っていたものであり、固定チャートを作成します（このサンプルからKOに適合）

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'を呼び出す前に、'element'の内容はすべてそこにあり、アクセス可能です。次に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 に答える