Web Components 차트 기능
Ignite UI for Web Components 차트를 사용하면 차트에 전달할 전체 데이터 스토리를 나타내는 다양한 기능을 표시할 수 있습니다. 이러한 각 기능은 완전히 사용자 정의할 수 있으며 설계 요구 사항에 맞게 스타일을 지정할 수 있으므로 완전히 제어할 수 있습니다. 강조 표시 및 주석과 같은 상호 작용을 통해 중요한 데이터 세부 정보를 호출할 수 있으므로 차트 내에서 더 심층적인 데이터 분석이 가능합니다.
Web Components 차트는 다음과 같은 차트 기능을 제공합니다.
Axis
서로 다른 축 속성을 사용하여 X-Axis와 Y-Axis의 모든 측면을 수정하거나 사용자 지정합니다. 눈금선을 표시하고, 눈금 표시 스타일을 사용자 지정하고, 축 제목을 변경하고, 축 위치 및 교차 값을 수정할 수도 있습니다. Web Components 차트의 축 눈금선, 축 레이아웃 및 축 옵션 항목의 사용자 지정에 대해 자세히 알아볼 수 있습니다.
// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
);
export class DataChartAxisCrossing {
private chart: IgcDataChartComponent;
private xAxis: IgcNumericXAxisComponent;
private yAxis: IgcNumericYAxisComponent;
private xAxisCrossLabel: HTMLLabelElement;
private yAxisCrossLabel: HTMLLabelElement;
private data: any[] = [];
constructor() {
this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;
this.xAxis.crossingAxis = this.yAxis;
this.yAxis.crossingAxis = this.xAxis;
this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;
const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);
const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);
this.chart.dataSource = this.data;
}
public initData() {
for (let i = -360; i <= 360; i += 10) {
const radians = (i * Math.PI) / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
this.data.push({ X: i, sinValue: sin, cosValue: cos });
}
}
public onXAxisSliderChanged(e: any) {
const value = e.target.value;
this.yAxis.crossingValue = value;
this.xAxisCrossLabel.textContent = value;
}
public onYAxisSliderChanged(e: any) {
const value = e.target.value;
this.xAxis.crossingValue = value;
this.yAxisCrossLabel.textContent = value;
}
}
new DataChartAxisCrossing();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartAxisCrossing</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="options horizontal">
<label class="option-label">X-Axis Crossing Value: </label>
<label class="options-value" id="xAxisCrossLabel">0</label>
<input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
<label class="option-label">Y-Axis Crossing Value: </label>
<label class="options-value" id="yAxisCrossLabel">0</label>
<input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
plot-area-margin-left="30" plot-area-margin-right="30">
<igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
crossing-value="0" stroke-thickness="1" stroke="Black">
</igc-numeric-x-axis>
<igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
crossing-value="0" stroke-thickness="1" stroke="Black">
</igc-numeric-y-axis>
<igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
<igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-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
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Annotations
이러한 추가 레이어는 마우스/터치에 따라 달라지는 차트 상단에 있습니다. 개별적으로 또는 결합하여 사용하면 차트 내의 특정 값을 강조 표시하는 데 도움이 되는 강력한 상호 작용을 제공합니다. 차트 주석 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcMarkerTypeCollection } from 'igniteui-webcomponents-charts';
import { MarkerType } from 'igniteui-webcomponents-charts';
import { CrosshairsDisplayMode } from 'igniteui-webcomponents-charts';
ModuleManager.register(IgcCategoryChartModule);
export class Sample {
private chart: IgcCategoryChartComponent;
public includedProperties: string[] = ["Year", "USA"];
public data: any[] = [];
constructor() {
this.onCrosshairsVisible = this.onCrosshairsVisible.bind(this);
this.onCalloutsVisible = this.onCalloutsVisible.bind(this);
this.onFinalValuesVisible = this.onFinalValuesVisible.bind(this);
this.onMarkersVisible = this.onMarkersVisible.bind(this);
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.initData();
this.chart.dataSource = this.data;
this.chart.includedProperties = this.includedProperties;
let checkbox1 = document.getElementById('checkbox1');
checkbox1!.addEventListener('change', this.onCrosshairsVisible);
let checkbox2 = document.getElementById('checkbox2');
checkbox2!.addEventListener('change', this.onCalloutsVisible);
let checkbox3 = document.getElementById('checkbox3');
checkbox3!.addEventListener('change', this.onFinalValuesVisible);
let checkbox4 = document.getElementById('checkbox4');
checkbox4!.addEventListener('change', this.onMarkersVisible);
}
public initData() {
this.data = [
{ Year: "2009", USA: 19 },
{ Year: "2010", USA: 24 },
{ Year: "2011", USA: 28 },
{ Year: "2012", USA: 26 },
{ Year: "2013", USA: 38 },
{ Year: "2014", USA: 31 },
{ Year: "2015", USA: 19 },
{ Year: "2016", USA: 52 },
{ Year: "2017", USA: 50 },
{ Year: "2018", USA: 34 },
{ Year: "2019", USA: 38 },
];
let idx: number = 0;
for (const item of this.data) {
item.index = idx;
item.value = item.USA;
item.label = item.USA + " " + "TWh";
idx++;
}
}
public onCrosshairsVisible = (e: any) => {
const isVisible = e.target.checked;
this.chart.crosshairsAnnotationEnabled = isVisible;
if (isVisible) {
this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.Both;
}
else {
this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.None;
}
}
public onCalloutsVisible = (e: any) => {
let value = e.target.checked;
this.chart.calloutsVisible = value;
}
public onFinalValuesVisible = (e: any) => {
let value = e.target.checked;
this.chart.finalValueAnnotationsVisible = value;
}
public onMarkersVisible = (e: any) => {
const visible = e.target.checked;
const markers = e.target.checked ? 'Circle' : 'None';
switch (markers) {
case 'Circle': {
let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
collection.add(MarkerType.Circle);
this.chart.markerTypes = collection;
break;
}
case 'None': {
let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
collection.add(MarkerType.None);
this.chart.markerTypes = collection;
break;
}
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartLineChartWithAnnotations</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="options horizontal">
<label class="options-label">Annotations: </label>
<label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Crosshair </label>
<label class="options-label"><input type="checkbox" id="checkbox2" checked="true"></input> Callouts </label>
<label class="options-label"><input type="checkbox" id="checkbox3" checked="true"></input> Final Values </label>
<label class="options-label"><input type="checkbox" id="checkbox4" checked="true"></input> Markers </label>
</div>
<div class="container fill" style="height: calc(100% - 1.25rem)">
<igc-category-chart id="chart"
width="100%" height="100%"
chart-type="Line"
subtitle="Renewable Electricity Generated"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
yAxisTitle="TWh"
y-axis-label-location="OutsideRight"
thickness="2"
callouts-visible="true"
callouts-x-member-path="index"
callouts-y-member-path="value"
callouts-label-member-path="label"
crosshairs-snap-to-data="false"
crosshairs-display-mode="Both"
crosshairs-annotation-enabled="true"
final-value-annotations-visible="true"
marker-types="Circle"
computed-plot-area-margin-mode="Series">
</igc-category-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
Animations
애니메이션을 활성화하여 새 데이터 소스를 로드할 때 차트에 애니메이션을 적용하세요. 다양한 유형의 애니메이션과 해당 애니메이션이 발생하는 속도를 설정하여 사용자 정의할 수 있습니다. 차트 애니메이션 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcCategoryChartModule
);
export class CategoryChartLineChartWithAnimations {
private chart: IgcCategoryChartComponent;
private transitionLabel: HTMLLabelElement;
public data: any[] = [];
constructor() {
this.onAnimationChanged = this.onAnimationChanged.bind(this);
this.onTransitionTimeChanged = this.onTransitionTimeChanged.bind(this);
this.onReloadChartBtnClicked = this.onReloadChartBtnClicked.bind(this);
this.reloadChart = this.reloadChart.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = this.data;
const animationSelect = document.getElementById("animationSelect") as HTMLSelectElement;
animationSelect.addEventListener("change", this.onAnimationChanged);
this.transitionLabel = document.getElementById("transitionLabel") as HTMLLabelElement;
const transitionSlider = document.getElementById("transitionSlider") as HTMLInputElement;
transitionSlider.addEventListener("change", this.onTransitionTimeChanged);
const reloadChartButton = document.getElementById("reloadChartBtn") as HTMLButtonElement;
reloadChartButton.addEventListener("click", this.onReloadChartBtnClicked);
}
public initData() {
this.data = [
{ Year: "2009", Europe: 31, China: 21, USA: 19 },
{ Year: "2010", Europe: 43, China: 26, USA: 24 },
{ Year: "2011", Europe: 66, China: 29, USA: 28 },
{ Year: "2012", Europe: 69, China: 32, USA: 26 },
{ Year: "2013", Europe: 58, China: 47, USA: 38 },
{ Year: "2014", Europe: 40, China: 46, USA: 31 },
{ Year: "2015", Europe: 78, China: 50, USA: 19 },
{ Year: "2016", Europe: 13, China: 90, USA: 52 },
{ Year: "2017", Europe: 78, China: 132, USA: 50 },
{ Year: "2018", Europe: 40, China: 134, USA: 34 },
{ Year: "2019", Europe: 80, China: 96, USA: 38 }
];
}
public onAnimationChanged(e: any) {
this.chart.transitionInMode = e.target.value;
this.reloadChart();
}
public onTransitionTimeChanged(e: any) {
this.chart.transitionInDuration = e.target.value;
this.transitionLabel.textContent = e.target.value + "ms";
this.reloadChart();
}
public onReloadChartBtnClicked(e: any) {
this.reloadChart();
}
public reloadChart() {
this.chart.replayTransitionIn();
}
}
new CategoryChartLineChartWithAnimations();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartLineChartWithAnimations</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="options horizontal">
<span class="options-label">Transition Type </span>
<select id="animationSelect">
<option>Auto</option>
<option>AccordionFromBottom</option>
<option>AccordionFromCategoryAxisMaximum</option>
<option>AccordionFromCategoryAxisMinimum</option>
<option>AccordionFromLeft</option>
<option>AccordionFromRight</option>
<option>AccordionFromTop</option>
<option>AccordionFromValueAxisMaximum</option>
<option>AccordionFromValueAxisMinimum</option>
<option>Expand</option>
<option>FromZero</option>
<option>SweepFromBottom</option>
<option>SweepFromCategoryAxisMaximum</option>
<option>SweepFromCategoryAxisMinimum</option>
<option>SweepFromCenter</option>
<option>SweepFromLeft</option>
<option>SweepFromRight</option>
<option>SweepFromTop</option>
<option>SweepFromValueAxisMaximum</option>
<option>SweepFromValueAxisMinimum</option>
</select>
<label id="transitionLabel" class="options-value" style="width: 75px">1000ms</label>
<input id="transitionSlider" class="options-slider" type="range" min="50" max="2000" step="50" value="1000" />
<button id="reloadChartBtn">Reload Chart</button>
</div>
<igc-category-chart id="chart" width="100%" height="calc(100% - 30px)"
chart-type="Line"
is-transition-in-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
computed-plot-area-margin-mode="Series">
</igc-category-chart>
</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
Highlighting
마우스를 데이터 항목 위로 가져가면 선, 열 또는 표식과 같은 시각적 개체를 강조 표시하여 초점을 맞춥니다. 이 기능은 모든 차트 유형에서 활성화됩니다. 차트 강조 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
import { SeriesHighlightingBehavior, LegendHighlightingMode, SeriesHighlightingMode, IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcCategoryChartModule, IgcLegendModule);
export class CategoryChartHighlighting {
private chart: IgcCategoryChartComponent;
private legend: IgcLegendComponent
public data: any[] = [];
constructor() {
this.onHighlightingTargetChanged = this.onHighlightingTargetChanged.bind(this);
this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = this.data;
this.legend = document.getElementById('Legend') as IgcLegendComponent;
this.chart.legend = this.legend
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = true;
this.chart.isCategoryHighlightingEnabled = false;
this.chart.highlightingMode = SeriesHighlightingMode.Auto;
this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;
const highlightingTarget1 = document.getElementById('highlightingTarget') as HTMLSelectElement;
highlightingTarget1!.addEventListener('change', this.onHighlightingTargetChanged);
const highlightingMode = document.getElementById("highlightingMode") as HTMLSelectElement;
highlightingMode!.addEventListener("change", this.onHighlightingModeChanged);
const behaviorMode = document.getElementById("behaviorMode") as HTMLSelectElement;
behaviorMode!.addEventListener("change", this.onBehaviorModeChanged);
const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
}
public onHighlightingTargetChanged = (e: any) => {
let value = e.target.value as String;
if(value == "Series"){
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = true;
this.chart.isCategoryHighlightingEnabled = false;
}
else if(value == "Item") {
this.chart.isItemHighlightingEnabled = true;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = false;
}
else if(value == "Category") {
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = true;
}
else if(value=="None") {
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = false;
}
}
public onHighlightingModeChanged(e: any) {
this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
}
public onBehaviorModeChanged(e: any) {
this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
}
public onLegendHighlightingModeChanged(e: any) {
this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
}
public initData() {
const CityTemperatureData: any = [
{ Month: "JAN", NewYork: 10.6, LosAngeles: 28.3},
{ Month: "FEB", NewYork: 7.8, LosAngeles: 31.1},
{ Month: "MAR", NewYork: 12.2, LosAngeles: 27.8},
{ Month: "APR", NewYork: 11.7, LosAngeles: 33.9},
{ Month: "MAY", NewYork: 19.4, LosAngeles: 35.0},
{ Month: "JUN", NewYork: 23.3, LosAngeles: 36.7},
{ Month: "JUL", NewYork: 27.2, LosAngeles: 33.3},
{ Month: "AUG", NewYork: 25.6, LosAngeles: 36.7},
{ Month: "SEP", NewYork: 22.8, LosAngeles: 43.9},
{ Month: "OCT", NewYork: 17.8, LosAngeles: 38.3 },
{ Month: "NOV", NewYork: 17.8, LosAngeles: 32.8},
{ Month: "DEC", NewYork: 8.3, LosAngeles: 28.9},
];
this.data = [ CityTemperatureData];
}
}
new CategoryChartHighlighting();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartColumnChartWithHighlighting</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="options horizontal">
<label class="options-label">Highlight Target: </label>
<select id="highlightingTarget">
<option>Series</option>
<option>Item</option>
<option>Category</option>
<option>None</option>
</select>
<span class="options-label">Mode:</span>
<select id="highlightingMode">
<option>Auto</option>
<option>Brighten</option>
<option>BrightenSpecific</option>
<option>FadeOthers</option>
<option>FadeOthersSpecific</option>
<option>None</option>
</select>
<span class="options-label">Behavior:</span>
<select id="behaviorMode">
<option>Auto</option>
<option>DirectlyOver</option>
<option>NearestItems</option>
<option>NearestItemsAndSeries</option>
<option>NearestItemsRetainMainShapes</option>
</select>
<span class="options-label">Legend:</span>
<select id="legendHighlightingMode">
<option>Auto</option>
<option>MatchSeries</option>
<option>None</option>
</select>
</div>
<div class="options vertical">
<span class="legend-title">
Average Temperatures in the U.S. Cities
</span>
<div class="legend">
<igc-legend
orientation="Horizontal"
name="Legend"
id ="Legend">
</igc-legend>
</div>
</div>
<igc-category-chart id="chart" style="height: calc(100% - 3rem)"
width="100%"
height="100%"
x-axis-interval="1"
y-axis-minimum-value="0"
y-axis-title="Temperatures in Celsius"
is-series-highlighting-enabled="true"
is-category-highlighting-enabled="true"
is-item-highlighting-enabled="true">
</igc-category-chart>
</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
Markers
차트 시리즈의 마커를 사용하면 값이 주요 눈금선 사이에 있는 경우에도 데이터 요소를 빠르게 식별할 수 있습니다. 스타일, 색상 및 모양을 완벽하게 사용자 정의할 수 있습니다. 차트 표시 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private chartTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private markerTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var chartTypeEditor = this.chartTypeEditor = document.getElementById('ChartTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var markerTypeEditor = this.markerTypeEditor = document.getElementById('MarkerTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateMarkerType = this.editorChangeUpdateMarkerType.bind(this);
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
markerTypeEditor.changed = this.editorChangeUpdateMarkerType;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
DataChartInteractivityDescriptionModule.register(context);
}
return this._componentRenderer;
}
public editorChangeUpdateMarkerType(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart;
var markerVal = item.primitiveValue;
chart.markerTypes = markerVal;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="ChartType"
name="ChartTypeEditor"
id="ChartTypeEditor"
label="Chart Type"
primitive-value="Line">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="MarkerTypeHandler"
name="MarkerTypeEditor"
id="MarkerTypeEditor"
label="Marker Type"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-values="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
drop-down-names="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
primitive-value="Circle">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
is-series-highlighting-enabled="true"
chart-type="Line"
computed-plot-area-margin-mode="Series">
</igc-category-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
Navigation
마우스, 키보드 및 터치 상호 작용을 통해 확대/축소 및 이동하여 차트를 탐색할 수 있습니다. 차트 탐색 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
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 { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartFinancialModule,
IgcDataChartInteractivityModule,
);
export class DataChartNavigation {
private chart: IgcDataChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = SampleFinancialData.create();
this.chart.actualWindowScaleHorizontal = 0.60;
this.chart.actualWindowScaleVertical = 0.60;
this.chart.actualWindowPositionVertical = 0.20;
this.chart.actualWindowPositionHorizontal = 0.20;
const panUp = document.getElementById('panUp') as HTMLButtonElement;
panUp!.addEventListener('click', this.onPanUpClick);
const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
panLeft!.addEventListener('click', this.onPanLeftClick);
const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
zoomIn!.addEventListener('click', this.onZoomInClick);
const panDown = document.getElementById('panDown') as HTMLButtonElement;
panDown!.addEventListener('click', this.onPanDownClick);
const panRight = document.getElementById('panRight') as HTMLButtonElement;
panRight!.addEventListener('click', this.onPanRightClick);
const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
zoomOut!.addEventListener('click', this.onZoomOutClick);
const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
panModSelect!.value = 'Alt';
panModSelect!.addEventListener('change', this.onPanModifierChange);
const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
interactionSelect!.value = 'DragPan';
interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);
const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
dragModSelect!.value = 'Shift';
dragModSelect!.addEventListener('change', this.onDragModifierChange);
const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
zoomEnabled!.checked = true;
zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
}
public onDefaultInteractionChange = (e: any) => {
switch (e.target.value) {
case 'DragZoom':
this.chart.defaultInteraction = InteractionState.DragZoom;
break;
case 'DragPan':
this.chart.defaultInteraction = InteractionState.DragPan;
break;
case 'None':
this.chart.defaultInteraction = InteractionState.None;
break;
}
}
public onPanModifierChange = (e: any) => {
switch (e.target.value) {
case 'Alt':
this.chart.panModifier = ModifierKeys.Alt;
break;
case 'Control':
this.chart.panModifier = ModifierKeys.Control;
break;
case 'Shift':
this.chart.panModifier = ModifierKeys.Shift;
break;
case 'Windows':
this.chart.panModifier = ModifierKeys.Windows;
break;
case 'Apple':
this.chart.panModifier = ModifierKeys.Apple;
break;
case 'None':
this.chart.panModifier = ModifierKeys.None;
break;
}
}
public onDragModifierChange = (e: any) => {
switch (e.target.value) {
case 'Alt':
this.chart.dragModifier = ModifierKeys.Alt;
break;
case 'Control':
this.chart.dragModifier = ModifierKeys.Control;
break;
case 'Shift':
this.chart.dragModifier = ModifierKeys.Shift;
break;
case 'Windows':
this.chart.dragModifier = ModifierKeys.Windows;
break;
case 'Apple':
this.chart.dragModifier = ModifierKeys.Apple;
break;
case 'None':
this.chart.dragModifier = ModifierKeys.None;
break;
}
}
public onZoomEnabledChange = (e: any) => {
const isZoomEnabled = e.target.checked;
this.chart.isHorizontalZoomEnabled = isZoomEnabled;
this.chart.isVerticalZoomEnabled = isZoomEnabled;
}
public onPanUpClick = (e: any) => {
this.chart.actualWindowPositionVertical -= 0.05;
}
public onPanDownClick = (e: any) => {
this.chart.actualWindowPositionVertical += 0.05;
}
public onPanLeftClick = (e: any) => {
this.chart.actualWindowPositionHorizontal -= 0.05;
}
public onPanRightClick = (e: any) => {
this.chart.actualWindowPositionHorizontal += 0.05;
}
public onZoomOutClick = (e: any) => {
if (this.chart.actualWindowPositionHorizontal > 0.025) {
this.chart.actualWindowPositionHorizontal -= 0.025;
}
if (this.chart.actualWindowPositionVertical > 0.025) {
this.chart.actualWindowPositionVertical -= 0.025;
}
if (this.chart.actualWindowScaleHorizontal < 1.0) {
this.chart.actualWindowScaleHorizontal += 0.05;
}
if (this.chart.actualWindowScaleVertical < 1.0) {
this.chart.actualWindowScaleVertical += 0.05;
}
}
public onZoomInClick = (e: any) => {
if (this.chart.actualWindowPositionHorizontal < 1.0) {
this.chart.actualWindowPositionHorizontal += 0.025;
}
if (this.chart.actualWindowPositionVertical < 1.0) {
this.chart.actualWindowPositionVertical += 0.025;
}
if (this.chart.actualWindowScaleHorizontal > 0.05) {
this.chart.actualWindowScaleHorizontal -= 0.05;
}
if (this.chart.actualWindowScaleVertical > 0.05) {
this.chart.actualWindowScaleVertical -= 0.05;
}
}
}
new DataChartNavigation();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartNavigation</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="options horizontal">
<div class="options vertical" style="width: 100px">
<button id="panUp">Pan Up</button>
<button id="panDown">Pan Down</button>
</div>
<div class="options vertical" style="width: 100px">
<button id="panLeft">Pan Left</button>
<button id="panRight">Pan Right</button>
</div>
<div class="options vertical" style="width: 100px">
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
</div>
<div class="options vertical" style="width: 120px; align-self: center">
<label class="options-label" style="margin: 5px">Pan Modifier:</label>
<label class="options-label" style="margin: 5px">Zoom Modifier:</label>
</div>
<div class="options vertical" style="width: 100px">
<select id="panModSelect" style="margin: 5px">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
<select id="dragModSelect" style="margin: 5px">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
</div>
<div class="options vertical" style="width: 150px; align-self: center">
<label class="options-label" style="margin: 5px;">Interaction:</label>
<label class="options-label" style="margin: 5px;">Zooming:</label>
</div>
<div class="options vertical" style="width: 100px">
<select id="interactionSelect" style="margin: 5px">
<option>DragZoom</option>
<option>DragPan</option>
<option>None</option>
</select>
<input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
</div>
</div>
<div class="container vertical">
<igc-data-chart
id="chart"
width="100%"
height="100%"
subtitle="Stock Prices Series in Candlestick Display Type"
subtitle-top-margin="10"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
pan-modifier="Alt"
drag-modifier="Shift"
default-interaction="DragPan">
<igc-category-x-axis
name="xAxis"
label="Label"></igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
title="Amount (in USD)"
title-right-margin="10"
label-right-margin="10"
label-horizontal-alignment="Left"
label-location="OutsideRight"></igc-numeric-y-axis>
<igc-financial-price-series
x-axis-name="xAxis"
y-axis-name="yAxis"
display-type="Candlestick"
open-member-path="Open"
close-member-path="Close"
high-member-path="High"
low-member-path="Low"
volume-member-path="Volume"
show-default-tooltip="true"
is-transition-in-enabled="true"
title="Price"></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
Overlays
오버레이를 사용하면 차트에 가로 또는 세로 선을 그려 중요한 값과 임계값에 주석을 달 수 있습니다. 차트 오버레이 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
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 { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcValueOverlayModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcColumnSeriesModule,
IgcValueOverlayModule
);
export class DataChartSeriesValueOverlay {
private chart: IgcDataChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
}
getData(): any[] {
const data = [
{ 'Label': 1, 'Value': 1.0 },
{ 'Label': 2, 'Value': 2.0 },
{ 'Label': 3, 'Value': 6.0 },
{ 'Label': 4, 'Value': 8.0 },
{ 'Label': 5, 'Value': 2.0 },
{ 'Label': 6, 'Value': 6.0 },
{ 'Label': 7, 'Value': 4.0 },
{ 'Label': 8, 'Value': 2.0 },
{ 'Label': 9, 'Value': 1.0 },
];
return data;
}
}
new DataChartSeriesValueOverlay();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartSeriesValueOverlay</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="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-category-x-axis name="xAxis" label="Label">
</igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value="0" maximum-value="10">
</igc-numeric-y-axis>
<igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Value">
</igc-column-series>
<igc-value-overlay name="overlay1" axis-name="yAxis" value="2.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay2" axis-name="yAxis" value="3.6" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay3" axis-name="yAxis" value="5.8" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay4" axis-name="yAxis" value="1.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay5" axis-name="yAxis" value="8.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay6" axis-name="yAxis" value="7.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay7" axis-name="yAxis" value="5.0" thickness="5">
</igc-value-overlay>
</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
Performance
Web Components 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능에 최적화되어 있습니다. 그러나 차트의 성능에 영향을 주는 몇 가지 차트 기능이 있으며 응용 프로그램에서 성능을 최적화할 때 이러한 기능을 고려해야 합니다. 이 기능에 대한 자세한 내용은 차트 성능 항목에서 확인할 수 있습니다.
export class CategoryChartSharedData {
public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const v = Math.abs(Math.round(value * 10) / 10);
data.push({ Label: i.toString(), Value: v });
}
return data;
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
public static toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
public static addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
tsimport { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';
ModuleManager.register(IgcCategoryChartModule);
export class CategoryChartHighVolume {
private chart: IgcCategoryChartComponent;
public dataPoints: number = 500000;
public dataInfo: string = CategoryChartSharedData.toShortString(this.dataPoints);
public data: any[] = [];
private dataInfoLabel: HTMLLabelElement;
constructor() {
this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
let slider1 = document.getElementById('dataPointsSlider') as HTMLInputElement;
slider1!.addEventListener('change', this.onDataPointsChanged);
let DataGenerate1 = document.getElementById('DataGenerate') as HTMLButtonElement;
DataGenerate1!.addEventListener('click', this.onDataGenerateClick);
}
public onDataPointsChanged = (e: any) => {
this.dataPoints = e.target.value;
const info = CategoryChartSharedData.toShortString(this.dataPoints);
this.dataPoints = this.dataPoints;
this.dataInfo = info;
this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
this.dataInfoLabel.textContent = this.dataPoints.toString();
}
public onDataGenerateClick = (e: any) => {
if (this.dataPoints === undefined) {
this.dataPoints = 10000;
}
this.generateData();
}
public generateData() {
this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
}
}
new CategoryChartHighVolume();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartHighVolume</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="options horizontal">
<label class="options-label">Data Points: </label>
<label class="options-value" id="dataInfoLabel"> 500000 </label>
<input id="dataPointsSlider" class="options-slider" type="range" min="10000" max="1000000" step="1000"
value=500000 />
<button id="DataGenerate">Generate Data</button>
</div>
<igc-category-chart id="chart"
width="100%"
height="calc(100% - 3rem)"
chart-type="Line"
tool-tip-type="Default"
y-axis-extent="60"
x-axis-enhanced-interval-prefer-more-category-labels="false"
should-consider-auto-rotation-for-initial-labels="false"
should-auto-expand-margin-for-initial-labels="false"
crosshairs-display-mode="None"
auto-margin-and-angle-update-mode="None"
marker-types="None" >
</igc-category-chart>
</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
Tooltips
도구 설명을 통해 특정 시리즈 유형과 관련된 모든 정보를 표시합니다. 항목 수준 및 범주 수준 도구 설명과 같이 활성화할 수 있는 다양한 도구 설명이 있습니다. 차트 도구 설명 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
chart.legend = this.legend;
chart.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</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" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="ToolTipType"
name="ToolTipTypeEditor"
id="ToolTipTypeEditor"
label="ToolTip Type: "
primitive-value="Data">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
crosshairs-snap-to-data="true">
</igc-category-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
Trendlines
추세선을 사용하여 추세를 식별하거나 데이터에서 패턴을 찾을 수 있습니다. Web Components 차트에서 지원하는 다양한 추세선(예: CubicFit 및 LinearFit)이 있습니다. 이 기능에 대한 자세한 내용은 차트 추세선 항목에서 확인할 수 있습니다.
export class StocksHistory {
/** gets stock OHLC prices for multiple stocks */
public static async getMultipleStocks(): Promise<any[]> {
// getting prices of multiples stocks asynchronously
const dataSources: any[] = [
//await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getMicrosoftStock(),
//await this.getTeslaStock()
];
return new Promise<any[]>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"
let item = new StockItem();
item.date = new Date(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
tsimport { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartTrendlines {
private chart: IgcFinancialChartComponent;
public trendLineType: TrendLineType = TrendLineType.QuinticFit;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.trendLineType = this.trendLineType;
let trendLineSelect = document.getElementById('trendLineSelect');
trendLineSelect!.addEventListener('change', this.onTrendlineChanged);
StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
this.chart.dataSource = stocks;
});
}
public onTrendlineChanged = (e: any) => {
const type = e.target.value;
switch (type) {
case 'CubicFit':
this.trendLineType = TrendLineType.CubicFit;
break;
case 'LinearFit':
this.trendLineType = TrendLineType.LinearFit;
break;
case 'QuinticFit':
this.trendLineType = TrendLineType.QuinticFit;
break;
case 'QuarticFit':
this.trendLineType = TrendLineType.QuarticFit;
break;
case 'ExponentialFit':
this.trendLineType = TrendLineType.ExponentialFit;
break;
case 'PowerLawFit':
this.trendLineType = TrendLineType.PowerLawFit;
break;
case 'LogarithmicFit':
this.trendLineType = TrendLineType.LogarithmicFit;
break;
case 'CumulativeAverage':
this.trendLineType = TrendLineType.CumulativeAverage;
break;
case 'ExponentialAverage':
this.trendLineType = TrendLineType.ExponentialAverage;
break;
case 'SimpleAverage':
this.trendLineType = TrendLineType.SimpleAverage;
break;
case 'ModifiedAverage':
this.trendLineType = TrendLineType.ModifiedAverage;
break;
case 'WeightedAverage':
this.trendLineType = TrendLineType.WeightedAverage;
break;
case 'None':
this.trendLineType = TrendLineType.None;
break;
}
this.chart.trendLineType = this.trendLineType;
}
}
new FinancialChartTrendlines();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartTrendlines</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="options horizontal">
<label class="options-label">Trendline Type:</label>
<select id="trendLineSelect">
<option>QuinticFit</option>
<option>CubicFit</option>
<option>LinearFit</option>
<option>QuarticFit</option>
<option>ExponentialFit</option>
<option>PowerLawFit</option>
<option>LogarithmicFit</option>
<option>CumulativeAverage</option>
<option>ExponentialAverage</option>
<option>SimpleAverage</option>
<option>ModifiedAverage</option>
<option>WeightedAverage</option>
<option>None</option>
</select>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-financial-chart id="chart" width="100%" height="100%"
chart-type="Bar"
thickness="2"
trend-line-thickness="2"
trend-line-period="10"
trend-line-brushes="rgba(0, 101, 209, 1)"
chart-title="Microsoft Trend"
subtitle="Between 2013 and 2017"
zoom-slider-type="None"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
>
</igc-financial-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