Web Components 축 레이아웃
모든 Ignite UI for Web Components 차트에는 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 계열 간에 축을 공유하거나 동일한 차트에 여러 축을 포함할 수 있는 기능이 포함되어 있습니다. 이러한 기능은 아래 예에 나와 있습니다.
다음 예는 IgcCategoryChartComponent 및 IgcFinancialChartComponent 컨트롤에 적용될 수 있습니다.
축 위치 예
모든 축에 대해 차트 그림 영역과 관련하여 축 위치를 지정할 수 있습니다. xAxisLabelLocation Web Components 차트의 속성을 사용하면 x축 선과 해당 레이블을 그림 영역의 위 또는 아래에 배치할 수 있습니다. 마찬가지로 이 속성을 사용하여 y축을 yAxisLabelLocation 그림 영역의 왼쪽 또는 오른쪽에 배치할 수 있습니다.
다음 예에서는 2009년 이후 생산된 재생 가능 전기량을 선형 차트로 표시합니다. 차트 플롯 영역 내부 또는 외부의 왼쪽 또는 오른쪽에 레이블이 배치될 때 축이 어떻게 보이는지 시각화할 수 있도록 yAxisLabelLocation 구성할 수 있는 드롭다운이 있습니다.
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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
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 legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private yAxisLabelLocation: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var yAxisLabelLocation = this.yAxisLabelLocation = document.getElementById('YAxisLabelLocation') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
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);
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
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="false"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="YAxisLabelLocation"
name="YAxisLabelLocation"
id="YAxisLabelLocation"
label="Y Axis - Label Location"
primitive-value="OutsideRight">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
computed-plot-area-margin-mode="Series"
included-properties="year, europe, china, america"
chart-type="Line"
y-axis-title="Labels Location"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
y-axis-label-location="OutsideRight">
</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
축 고급 시나리오
고급 축 레이아웃 시나리오의 경우 Web Components 데이터 차트 사용하여 축을 공유하거나, 동일한 그림 영역에 여러 y축 및/또는 x축을 추가하거나, 특정 값에서 축을 교차할 수도 있습니다. 다음 예제에서는 이러한 기능을 IgcDataChartComponent 사용하는 방법을 보여 줍니다.
축 공유 예
Web Components IgcDataChartComponent의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. share IgcTimeXAxisComponent 및 add multiple IgcNumericYAxisComponent을 사용하여 광범위한 값(예: 주가 및 주식 거래량)을 가진 많은 데이터 원본을 그리는 것이 일반적인 시나리오입니다.
다음 예에서는 주식형 차트와 기둥 차트가 표시된 주식 가격 및 거래량 차트를 보여줍니다. 이 경우 왼쪽의 Y축은 기둥 차트에서 사용되고 오른쪽의 Y축은 주식형 차트에서 사용되며 X축은 두 축이 공유됩니다.
export class SharedAxisFinancialData {
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 = 400;
}
const today = new Date();
const end = new Date(today.getFullYear(), today.getMonth(), today.getDay());
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.49;
o = Math.round(o + (mod * 20));
o = Math.max(o, 500);
o = Math.min(o, 675);
v = Math.round(v + (mod * 500));
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;
}
}
ts// data chart's modules:
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
// series' modules:
import { IgcFinancialPriceSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SharedAxisFinancialData } from './SharedAxisFinancialData';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcFinancialPriceSeriesModule,
IgcNumberAbbreviatorModule,
IgcColumnSeriesModule
);
export class DataChartAxisSharing {
private chart: IgcDataChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
}
getData(): any[] {
const data = SharedAxisFinancialData.create();
return data;
}
}
new DataChartAxisSharing();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartAxisSharing</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">
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-category-x-axis name="xAxisShared" label="Label"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxisRight" label-location="OutsideRight"
minimum-value="400" title="Stock Price ($)"
maximum-value="700">
</igc-numeric-y-axis>
<igc-numeric-y-axis name="yAxisLeft" label-location="OutsideLeft"
minimum-value="5000" title="Trade Volume"
maximum-value="45000"
major-stroke-thickness="0"
abbreviate-large-numbers="true">
</igc-numeric-y-axis>
<igc-column-series
name="volumeSeries"
x-axis-name="xAxisShared"
y-axis-name="yAxisLeft"
value-member-path="Volume">
</igc-column-series>
<igc-financial-price-series
name="stockSeries"
x-axis-name="xAxisShared"
y-axis-name="yAxisRight"
display-type="Candlestick"
high-member-path="High"
low-member-path="Low"
close-member-path="Close"
open-member-path="Open">
</igc-financial-price-series>
</igc-data-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
축 교차 예
그림 영역 외부에 축을 배치하는 것 외에도 Web Components IgcDataChartComponent는 그림 영역 내부에 축을 배치하고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어 x축과 y축 모두에서 및 속성을 설정하여 crossingAxis crossingValue 삼각형 차트를 만들어 축 선과 축 레이블이 (0, 0) 원점에서 교차하도록 렌더링할 수 있습니다.
다음 예에서는 X축과 Y축이 (0, 0) 원점에서 서로 교차하는 분산 스플라인 차트로 표현되는 Sin 및 Cos 파동을 보여줍니다.
// 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
추가 리소스
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다. 위 섹션의 d:
IgcDataChartComponent |
IgcCategoryChartComponent |
|---|---|
Axes ➔ IgcNumericYAxisComponent ➔ crossingAxis |
없음 |
Axes ➔ IgcNumericYAxisComponent ➔ crossingValue |
없음 |
Axes ➔ IgcNumericXAxisComponent ➔ isInverted |
xAxisInverted |
Axes ➔ IgcNumericYAxisComponent ➔ isInverted |
yAxisInverted |
Axes ➔ IgcNumericYAxisComponent ➔ LabelLocation |
yAxisLabelLocation |
Axes ➔ IgcNumericXAxisComponent ➔ LabelLocation |
xAxisLabelLocation |
Axes ➔ IgcNumericYAxisComponent ➔ LabelHorizontalAlignment |
yAxisLabelHorizontalAlignment |
Axes ➔ IgcNumericXAxisComponent ➔ LabelVerticalAlignment |
xAxisLabelVerticalAlignment |
Axes ➔ IgcNumericYAxisComponent ➔ LabelVisibility |
yAxisLabelVisibility |
Axes ➔ IgcNumericXAxisComponent ➔ LabelVisibility |
xAxisLabelVisibility |