React 大規模データのバインド

React Financial Chart コンポーネントは大量のデータを処理できます。以下のデモは 20 年間分のデータをバインドし、折れ線チャートで 1 時間間隔の在庫価格を示します。

React 大規模データのバインドの例

Edit on CodeSandbox

チャートのパフォーマンスに影響を及ぼすチャート機能および 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} />

その他のリソース