2

パフォーマンスの問題/質問があります。angular と highcharts-ng を使用して、1 ページに約 80 の面グラフをレンダリングしています。データが読み込まれ、angular がそれをチャートにバインドしているときに、ブラウザが約 2 秒間応答しません。たいした量ではないかもしれませんが、それでも...

  1. 理由は何ですか？それは角度からチャートへのバインディングの問題ですか、それともハイチャートによるチャートのレンダリングですか?

  2. 少し速くするか、ブラウザをハングさせないようにする可能性はありますか?

編集：

サーバーからの応答は非常に高速です。データサイズはかなり小さいです。グラフをオフにすると (ng-if="false")、残りのデータが非常に速く読み込まれ、パフォーマンスの問題はありません。

各面グラフには最大 12 個のデータポイントがあります。

4

2 に答える 2

3

古い投稿ですが、他の誰かが同様のものに遭遇した場合に備えて、highcharts-ng のデータ オブジェクト内に何を入れるかに注意してください。すべてが $watched になります。私の場合は、オブジェクトの配列をチャート データに配置して、グラフ セグメントがクリックされたときに詳細を表示できるようにしました。ただし、これにより、ダイジェスト サイクルが膨大になるため、パフォーマンスに深刻な問題が発生しました。配列自体ではなく、配列を返す関数をチャートデータに入れることで解決しました。

于 2016-02-24T05:54:56.177 に答える
0

API/サーバー側

私はまた、パフォーマンスに関して同様の問題を抱えていたAngularアプリを持っています(1つの違いは、ハイチャートを使用していますが、ディレクティブ-ハイチャートNGを使用していないことです)。angular およびサーバー コールの終了時、データが多すぎると、ページにデータをダウンロードするのに時間がかかることがあります。ただし、APIの応答は高速ですが、実際には要求が停止し、ページにデータをロードしてハイチャート/またはその他のDOMラベルマークアップに提供するのに時間がかかります. 私の応答データには、タイムスタンプ、値、平均などの多くのフィールドがありました。クエリ応答を最適化して、必要なフィールドのみを返して高速化しました。

グラフのレンダリングを高速化するには:

最近、highcharts は、さまざまな highcharts チャートのパフォーマンスを向上させる boost.js モジュールをリリースしました。ハイチャートに数十万のデータポイントをすばやくロードできるようにするモジュールです。

こちらをご覧くださいHighcharts Boost.jsモジュールの公式ページ

于 2015-10-23T15:05:00.207 に答える