Web Components チャート同期化
$ ProductName$ データ チャートを使用すると、複数のチャート間のズーム、パン、および十字線イベントの調整に関して同期をとることができます。これは、データ ソースが軸に関して似ているか同じであると仮定して、複数のチャートの同じ領域を視覚化するのに役立ちます。
Web Components チャート同期化の例
このサンプルは、2 つの Web Components データ チャートの同期を示しています。
export class SampleFinancialData {
public static create(items?: number): any[] {
// initial values
let v = 10000;
let o = 500;
let h = Math.round(o + (Math.random() * 5));
let l = Math.round(o - (Math.random() * 5));
let c = Math.round(l + (Math.random() * (h - l)));
if (items === undefined) {
items = 200;
}
const today = new Date();
const end = new Date(today.getFullYear(), 11, 1);
let time = this.addDays(end, -items);
const data: any[] = [];
for (let i = 0; i < items; i++) {
const date = time.toDateString();
const label = this.getShortDate(time, false);
// adding new data item
data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
// generating new values
const mod = Math.random() - 0.45;
o = Math.round(o + (mod * 5 * 2));
v = Math.round(v + (mod * 5 * 100));
h = Math.round(o + (Math.random() * 5));
l = Math.round(o - (Math.random() * 5));
c = Math.round(l + (Math.random() * (h - l)));
time = this.addDays(time, 1);
}
return data;
}
public static addDays(dt: Date, days: number): Date {
return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
}
public static getShortDate(dt: Date, showYear: boolean): string {
const months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const ind = dt.getMonth();
const day = dt.getDay() + 1;
let label = months[ind] + " " + day;
if (showYear) {
label += " " + dt.getFullYear();
}
return label;
}
}
tsimport { SampleFinancialData } from './SampleFinancialData';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcFinancialPriceSeriesModule
);
export class DataChartSynchronization {
private chart1: IgcDataChartComponent;
private chart2: IgcDataChartComponent;
constructor() {
this.chart1 = document.getElementById('chart1') as IgcDataChartComponent;
this.chart1.dataSource = SampleFinancialData.create();
this.chart2 = document.getElementById('chart2') as IgcDataChartComponent;
this.chart2.dataSource = SampleFinancialData.create();
}
}
new DataChartSynchronization();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartSynchronization</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="container" style="height: 100%">
<igc-data-chart id="chart1" width="100%" height="50%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
sync-channel="ChannelA"
synchronize-horizontally="true"
synchronize-vertically="true"
subtitle="Google Stock Prices">
<igc-category-x-axis name="xAxis" label="Label"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" ></igc-numeric-y-axis>
<igc-financial-price-series
id="series1"
x-axis-name="xAxis"
y-axis-name="yAxis"
display-type="OHLC"
high-member-path="High"
low-member-path="Low"
close-member-path="Close"
open-member-path="Open"
volume-member-path="Volume">
</igc-financial-price-series>
</igc-data-chart>
<igc-data-chart id="chart2" width="100%" height="50%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
sync-channel="ChannelA"
synchronize-horizontally="true"
synchronize-vertically="true"
subtitle="Amazon Stock Prices"
subtitle-top-margin="10">
<igc-category-x-axis name="xAxis" label="Label"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" ></igc-numeric-y-axis>
<igc-financial-price-series
id="series1"
x-axis-name="xAxis"
y-axis-name="yAxis"
display-type="OHLC"
high-member-path="High"
low-member-path="Low"
close-member-path="Close"
open-member-path="Open"
volume-member-path="Volume">
</igc-financial-price-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
チャート同期化のプロパティ
チャートの同期にはデフォルトで 4 つのオプションがあり、水平方向のみ、垂直方向のみ、その両方を同期、あるいは同期なしを選択することもできます。
チャートのセットを同期する場合は、それらに SyncChannel プロパティに同じ名前を割り当ててから、SynchronizeHorizontally と SynchronizeVertically プロパティを対応するブール値に設定して、チャートを水平または垂直に同期するかどうかを指定できます。
垂直または水平に同期するには、isHorizontalZoomEnabled または isVerticalZoomEnabled プロパティをそれぞれ true に設定する必要があります。他のチャートに依存している同期チャートは、このプロパティ設定に関係なく、ズームできます。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。
isHorizontalZoomEnabledisVerticalZoomEnabledSyncChannelSynchronizeHorizontallySynchronizeVerticallyIgcDataChartComponent