1

チャート上の何かを変更するとき、myChart.addSeries(mySeriesObj)またはのように

myChart.get("myPointId').update(50);デフォルトの動作は、再描画関数の呼び出しです。

ここで、そのチャートに3つのシリーズ（seriesA、seriesB、seriesC）があり、seriesAの1ポイントを更新したとします。すべてのグラフ（seriesA、seriesB、seriesC、axis、labelsなど）を非常に高速に再描画しますか、それとも新しいポイントだけを再描画しますか？

Highchartはレイヤーで動作しますか、それともすべて同じ「フレーム」で動作しますか？

1,000ポイントを超えるシリーズで作業するため、これを求めています。Highchartで大きなデータを使用すると、パフォーマンスに問題が発生する可能性があることを知っています（marker.states.hoverを有効にするとパフォーマンスが低下することはすでにわかりました。オプションまたはツールチップオプション）

4

4 に答える 4

2

私の理解では、Highchartsはおそらく汚れたコンポーネント（あなたの場合、そのポイントが属するシリーズ）のみを再描画します。

chart.redraw()ソースの一部は次のようになります

// redraw affected series
each(series, function (serie) {
    if (serie.isDirty && serie.visible &&
            (!serie.isCartesian || serie.xAxis)) { // issue #153
        serie.redraw();
    }
});

を呼び出すとpoint.update()、ポイントが属するシリーズのみがダーティとしてマークされます。したがって、次のchart.redraw()呼び出しで再描画されますが、ポイントが更新されていない他のシリーズは再描画されません。

そうは言っても、上記以外にもコードの断片がありますchart.redraw()。主に軸や凡例などを再描画するために使用します。それらのほとんども同様のisDirtyロジックに基づいて再描画されているように見えるため、パフォーマンスを妨げるものであってはなりません。ただし、パフォーマンスが本当に重要な要素である場合はpoint.update()、2番目のパラメーターをとしてfalseで呼び出すことができます。これにより、暗黙のchart.redraw()呼び出しがスキップされ、そのため、その中のすべてがスキップされます。series.redraw()次に、更新する特定のシリーズ（ポイントが属するシリーズ）のメソッドを明示的に呼び出すことができます。
注意：これは軸（およびその他のもの）を再描画しません。ポイントの更新された値が現在の軸の極値の外側にある場合は、再描画が必要になる場合があります。また、series.redraw()はドキュメントに記載されていません。これは、使用が推奨されておらず、予期しない結果が生じる可能性があることを示している可能性があります。ほとんどの場合、パフォーマンスは非常に許容範囲内であるため、99％のケースで
問題を解決します。chart.redraw()

参照：
point.update()APIリファレンス
デモ@ JsFiddle

于 2013-02-17T15:28:02.817 に答える
1

ソースコードから：

/**
 * Redraw legend, axes or series based on updated data
 *
 * @param {Boolean|Object} animation Whether to apply animation, and optionally animation
 *    configuration
 */
 redraw: function (animation) {
于 2013-02-19T17:06:12.317 に答える
0

ポイント更新（）関数http://api.highcharts.com/highstock#Point.update（）を使用することもできます

于 2013-02-18T10:09:46.860 に答える
0

Highchartのパフォーマンスが1000ポイントを超えるフィットネスデータシリーズ（心拍数、速度など）をロードする際に問題が発生しました。プロットHighchartsの例でマーカーを無効にすると、パフォーマンスが大幅に向上することがわかりました。アニメーションも無効にしました。

ソリューションでchromeプロファイラーを実行したところ、レンダリングの準備中にhighcharts.src.jsの各関数が呼び出されることがわかりました。

    this.each =
            //Array.prototype.forEach ?
        //  function (arr, fn) { // modern browsers
        //      return Array.prototype.forEach.call(arr, fn);

        //  } : 
            function (arr, fn) { // legacy
                var i = 0, 
                    len = arr.length;
                for (; i < len; i++) {
                    if (fn.call(arr[i], arr[i], i, arr) === false) {
                        return i;
                    }
                }
            };

forEachはforループよりも遅いと聞いたので、forEachのデフォルトの選択をコメントアウトしました。jsperf for vs foreachでテストすると、私のマシン環境では、foreachが最速のreverse forループよりも85％遅いことがわかります。

于 2013-02-17T10:28:41.907 に答える