0

highcharts.js を使用してダッシュボードを構築しようとしています (ページに複数のグラフが表示されます)。これらのグラフのデータは ajax 経由で取得されます。これらの各グラフは、個別に更新できます。最初にこれを機能させようとしたときにエラー #16 が発生し、HighCharts.js が含まれており、ajax 応答が HighCharts を再度送信していたため、このエラーが HighCharts によってスローされていたことがわかりました。

これを回避するために、HighCharts が既に定義されているかどうかを確認する js コードを追加し、それが null に設定されているかどうかを確認しました 

if(window.Highcharts){
    window.Highcharts = null;
}

これで問題は解決したように見えましたが、1 つのグラフを更新すると、ダッシュボードの他のグラフにレンダリングの問題があるように見えます - 他のグラフの一部が取り除かれているようです。

私がやっていることが正しいかどうか教えてください。また、既に読み込まれている HighCharts の読み込みを避けるためのより良い方法を教えてください。

4

2 に答える 2

2

レンダリングする HTML を制御できると仮定すると、いずれかを行う必要があります。

  1. ハイチャート (およびその他のスクリプト) を依存関係としてページ コンテナーに配置して、確実に 1 回だけ読み込まれるようにします。
  2. 静的ではなく動的に HighChart を条件付きで読み込みます。

たとえば、次のようなものです。

function buildChart(func) {
    if (window.Highcharts === undefined) {
        console.log("Highcharts is not loaded, fetching...");
        $.getScript("http://code.highcharts.com/highcharts.js", function () {
            alert("HighCharts was loaded");
            func(); // build chart
        });
    }
    else {
        console.log("HighCharts was already loaded");
        func(); // build chart
    }


}

// test
buildChart(function () {
    // build chart
    console.log("Read to build chart with:", window.Highcharts);
})

ただし、この単純な例は、ハイチャートがまだロードされている間は同時リクエストに対応していません。したがって、このような条件付き読み込みについては、これらの依存関係を処理できるRequireJS、YepNope 、またはHeadJSなどのライブラリの使用を検討します。その後、必要に応じてコンポーネントに HighCharts スクリプトを含めることができ、それらは 1 回だけ読み込まれます。

于 2013-04-30T08:18:03.560 に答える
0

各スパンでハイチャートをロードするのはなぜですか? ドキュメントが読み込まれるときに一度だけ読み込む必要があります。

Highcharts は、グラフが更新されるたびに読み込む必要はありません...すでに存在しています。

ajax を介して個々のグラフを更新するために必要なことは、そのグラフのデータの json オブジェクトを返し、ページが読み込まれたときに設定された既存のオプションでグラフを再初期化することだけです。

于 2013-04-30T19:17:28.263 に答える