Web Components 차트 동기화
Ignite UI for Web Components 데이터 차트는 여러 차트 간의 확대, 패닝 및 크로스헤어 이벤트 조정과 관련하여 동기화를 허용합니다. 이를 통해 데이터 소스가 축과 관련하여 유사하거나 동일하다고 가정할 때 여러 차트의 동일한 영역을 시각화하는 데 도움이 될 수 있습니다.
Web Components 차트 동기화 예제
이 샘플은 두 개의 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 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
차트 동기화 속성
차트 동기화에는 네 가지 옵션이 있습니다. 수평으로만, 수직으로만, 둘 다 동기화할 수 있으며, 기본값인 전혀 동기화하지 않도록 선택할 수도 있습니다.
차트 세트를 동기화하려는 경우 SyncChannel 속성에 동일한 이름을 할당한 다음 SynchronizeHorizontally 및 SynchronizeVertically 속성을 해당 부울 값으로 설정하여 차트를 수평 및/또는 수직으로 동기화할지 여부를 지정할 수 있습니다.
수직 및/또는 수평으로 동기화하려면 isHorizontalZoomEnabled 및/또는 isVerticalZoomEnabled 속성을 각각 true로 설정해야 합니다. 다른 차트에 종속된 동기화된 차트는 이 속성 설정에 관계없이 계속 확대/축소됩니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
isHorizontalZoomEnabledisVerticalZoomEnabledSyncChannelSynchronizeHorizontallySynchronizeVerticallyIgcDataChartComponent