React 大規模データのバインド
React Financial Chart コンポーネントは大量のデータを処理できます。以下のデモは 20 年間分のデータをバインドし、折れ線チャートで 1 時間間隔の在庫価格を示します。
React 大規模データのバインドの例
チャートのパフォーマンスに影響を及ぼすチャート機能および React 固有の機能があり、アプリケーションのパフォーマンスを最適化する際に検討する必要があります。
以下のコードはファイナンシャル チャートを大量データにバインドします。
import { GenerateHourlyPricesService } from "../services/generate-hourly-prices.service";
export class AppComponent {
public data: any;
constructor(private dataService: GenerateHourlyPricesService) {
const dateEnd = new Date(2018, 3, 20); // April 20, 2018
const dateStart = new Date(1998, 3, 20); // April 20, 1998
this.data = this.dataService.GetStockHistoryBetween(dateStart, dateEnd);
}
}
<IgrFinancialChart
width="850px"
height="600px"
dataSource={this.data} />