Web Components 大規模データのバインド

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

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

Edit on CodeSandbox

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

以下のコードはファイナンシャル チャートを大量データにバインドします。

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);
    }
}
 <igc-financial-chart id="chart"
    width="850px"
    height="600px">
 </igc-financial-chart>
let chart = (document.getElementById("chart") as IgcFinancialChartComponent);
chart.dataSource = data;

その他のリソース