0

私は Highcharts を使用するアプリを作成しています。ある例では、チャートの下部に、チャートの上に垂直に伸びる「スライダー」が必要です。スライダーを移動すると、ユーザーがチャート上でスライダーを動かした場所に基づいて、ページの他の部分が更新されます。

問題は、ハイチャート (画像または div) の上に何かを描画すると、パフォーマンスがまったく受け入れられなくなることです。スライダーがマウスの動きに追いつかないjsfiddle here を参照してください。注-これは、多数のデータポイントを操作する場合にのみ発生します（私の場合、これは絶対に避けられません）。

チャートの上に描画しない以外に、私にできることはありますか?

4

2 に答える 2

1

速度が遅いのは、divがチャート上をスライドするときに、ブラウザーがチャート（全体または一部）を再描画する必要があるためだと思います。グラフを再描画するための大きなデータセットを使用すると、これは煩わしいほど遅くなります。

解決策はありますが、すべてが常に受け入れられるわけではありません。

  • より低いレートでサンプリングすることにより、データセット内のポイント数を減らすことができます。
  • ビューアにセット全体の範囲のみが表示されるように、ウィンドウ処理を試すことができます。たとえば、10,000個のデータポイントがある場合、ウィンドウはデータセットに沿ってスライドでき、10,000ポイントすべてではなく、一度に1,500ポイントしか表示されません。
  • FlashやSilverlightなどの別のテクノロジーに移行します。

しかし、私が言ったように、これらのすべてまたはそれらのいずれかがあなたのために働くわけではありません。

于 2012-06-08T15:42:55.880 に答える
0

スライダーをグラフ上でドラッグすると、データポイントが強調表示されることに気付きました。おそらく、スライダーをドラッグしているときにチャートのその部分に pointer-events:none を設定する必要があります。これにより、ブラウザーはそのサブツリーのポインターイベントをチェックしなくなります (データポイントが多数ある場合は、特にコストが高くなる可能性があります)。ホバー時にこれらの要素を更新します)。

于 2012-06-11T08:46:28.743 に答える