リアルタイムのデータ

Ignite UI for React カテゴリ チャート コンポネントは、以下のサンプルのように数百万に及ぶデータ ポイントを含む大量のデータを処理し、数ミリ秒ごとに更新できます。

サンプル

パフォーマンスの最適化

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

Note

Angular: コンポーネントにバインドするプロパティで大量のデータを保存する場合、@Component デコレーターで changeDetection: ChangeDetectionStrategy.OnPush を設定します。React の各変更検出のサイクルでデータ配列内の変更を確認しないようにする設定です。

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

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