リアルタイム データ

Category Chart コントロールは、数百万に及ぶデータ ポイントを含む大量データを処理し、それらを数ミリ秒ごとに更新できます。以下では、カテゴリ チャート コンポーネントの高いパフォーマンスをご確認いただけます。

デモ

パフォーマンスの最適化

チャートのパフォーマンスに影響を及ぼすチャート機能および React 固有の機能があり、アプリケーションのパフォーマンスを最適化する際に検討する必要があります。

  • コンポーネントにバインドするプロパティで大量のデータを保存する場合、@Component デコレーターで changeDetection: ChangeDetectionStrategy.OnPush を設定します。
    • React の各変更検出のサイクルでデータ配列内の変更を確認しないようにする設定です。
  • チャートに React が自動でデータ変更を通知する代わりに、バインドされたデータが変更された方法をコンポーネントに通知できます。
    • デルタ通知の処理は、React が変更検出を実行する際に 100 万のレコードを含む配列のすべての変更を比較するより効果的に実行できます。
    • バインドしたデータの変更をチャートに通知する方法の詳細については、チャートの notify* メソッドを参照してください。
  • React が Debug モードで実行されている場合、特定のブラウザーでパフォーマンスを低下させるオーバーヘッドがあります。実環境パフォーマンスを評価する場合、--prod を使用して serve または build してください。

アプリケーションでパフォーマンス上の問題が発生した場合、デバッグ ビルドではなくプロダクション ビルドで実行するとチャートのパフォーマンスが改善されます。これらのケースでは必ずプロダクション ビルドを実行してください。