Web Components 축 옵션
모든 Ignite UI for Web Components 차트에서 좌표축은 제목, 레이블, 범위와 같은 시각적 구성을 위한 속성을 제공합니다. 이러한 기능은 아래 제공된 예에 설명되어 있습니다.
축 제목 예
Web Components 차트의 축 제목 기능을 사용하면 차트에 컨텍스트 정보를 추가할 수 있습니다. 축 제목의 모양과 느낌은 다양한 글꼴 스타일, 색, 여백 및 정렬을 적용하는 등 다양한 방법으로 사용자 지정할 수 있습니다.
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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
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;
}
}
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="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"
included-properties="year, europe, china, america"
chart-type="Line"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series"
x-axis-title="Year"
x-axis-title-text-color="gray"
x-axis-title-text-style="10pt 'Titillium Web'"
x-axis-title-angle="0"
y-axis-title="Trillions of Watt-hours (Twh)"
y-axis-title-text-color="gray"
y-axis-title-text-style="10pt 'Titillium Web'"
y-axis-title-angle="90"
y-axis-title-left-margin="5">
</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
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
축 레이블 예
Web Components Charts를 사용하면 차트의 축에 표시되는 레이블의 글꼴을 구성, 서식 지정 및 스타일링할 수 있습니다. 회전 각도, 여백, 수평 및 수직 정렬, 색상, 패딩 및 축 레이블의 가시성을 변경할 수 있습니다. 다음 예제에서는 축의 이러한 기능을 사용하는 방법을 보여 줍니다.
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 xAxisLabelAngleEditor: IgcPropertyEditorPropertyDescriptionComponent
private yAxisLabelAngleEditor: IgcPropertyEditorPropertyDescriptionComponent
private xAxisLabelTextColorEditor: 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 xAxisLabelAngleEditor = this.xAxisLabelAngleEditor = document.getElementById('XAxisLabelAngleEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var yAxisLabelAngleEditor = this.yAxisLabelAngleEditor = document.getElementById('YAxisLabelAngleEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var xAxisLabelTextColorEditor = this.xAxisLabelTextColorEditor = document.getElementById('XAxisLabelTextColorEditor') 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="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisLabelAngle"
name="XAxisLabelAngleEditor"
id="XAxisLabelAngleEditor"
label="X Axis Label Angle"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="0, 45, 90, 135, 180, 225, 270"
drop-down-values="0, 45, 90, 135, 180, 225, 270"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="YAxisLabelAngle"
name="YAxisLabelAngleEditor"
id="YAxisLabelAngleEditor"
label="Y Axis Label Angle"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="-90, -45, 0, 45, 90"
drop-down-values="-90, -45, 0, 45, 90"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="XAxisLabelTextColor"
name="XAxisLabelTextColorEditor"
id="XAxisLabelTextColorEditor"
label="Y Axis Label Color"
value-type="EnumValue"
should-override-default-editor="true"
drop-down-names="red, green"
drop-down-values="red, green"
primitive-value="red">
</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"
included-properties="year, europe, china, america"
chart-type="Line"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
top-margin="20"
x-axis-label-angle="0"
x-axis-label-text-color="gray"
x-axis-label-text-style="10pt 'Titillium Web'"
x-axis-label-top-margin="5"
y-axis-label-angle="0"
y-axis-label-text-color="gray"
y-axis-label-text-style="10pt 'Titillium Web'"
y-axis-label-right-margin="5"
y-axis-label-location="OutsideRight"
title-top-margin="10">
</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
Axis 라벨 관리 & 포맷
차트의 축에는 소유 축의 레이블에 사용할 수 있는 공간의 양에 관해 향상된 계산을 수행하는 기능이 있습니다. 이 향상된 계산을 통해 축은 주어진 축에 대해 더 많은 레이블을 표시하기 위해 주어진 공간의 양을 최적화할 수 있습니다.
이 향상된 계산은 사용자가 선택해야 하는 작업으로, useEnhancedIntervalManagement 속성을 true로 설정하여 수행할 수 있습니다. 그런 다음 축의 interval 속성을 수동으로 설정하지 않고 축의 크기에 맞출 수 있는 만큼 많은 레이블을 표시하려는 경우 축의 enhancedIntervalPreferMoreCategoryLabels 속성을 true로 설정할 수 있습니다.
또한 차트에는 할당된 공간에 맞지 않는 경우 레이블의 자동 회전을 고려하는 기능과 레이블이 들어갈 수 있도록 플롯 영역에 자동 여백을 적용하는 기능도 있습니다. 이는 먼저 차트의 autoMarginAndAngleUpdateMode 속성을 SizeChanging 또는 SizeChangingAndZoom으로 설정하여 처음에 선택할 수 있는 것입니다. 원하는 경우 레이블에 적용된 자동 여백과 각도를 언제 재평가할지 차트에 알려줍니다.
autoMarginAndAngleUpdateMode 설정한 후 shouldAutoExpandMarginForInitialLabels 속성을 true로 설정하여 자동 여백을 선택하거나 자동 회전을 위해 shouldConsiderAutoRotationForInitialLabels 속성을 true로 설정할 수 있습니다. autoExpandMarginExtraPadding 및 autoExpandMarginMaximumValue를 설정하여 각각 추가 공간 또는 가능한 최대 여백을 제공함으로써 적용되는 자동 여백을 추가로 사용자 정의할 수도 있습니다.
다음과 같은 사용자 지정 레이블 형식 IgcNumberFormatSpecifier 그리고 IgcDateTimeFormatSpecifier를 통해 각 축에 추가할 수 있습니다. XAxisLabelFormatSpecifier 그리고 YAxisLabelFormatSpecifier 컬렉션. 일반적으로 Intl.NumberFormat 및 Intl.DateTimeFormat 언어에 민감한 숫자, 날짜 및 시간 형식을 적용하는 데 사용됩니다. 사용자 지정 형식을 레이블에 적용하려면 yAxisLabelFormat 또는 xAxisLabelFormat에서 데이터 항목의 속성 이름으로 설정해야 합니다. IgcCategoryChartComponent 예. {Date}. 에 대한 IgcFinancialChartComponent 숫자는 숫자 축을 사용하기 때문에 컨텍스트이므로 다음과 같이 설정해야 합니다. {0}.
다음 예에서는 미국 최고의 박스오피스 영화에 대한 $USD 가격을 나타내기 위해 IgcNumberFormatSpecifier를 사용하여 yAxis의 형식을 지정합니다.
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 { IgcDataLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcNumberFormatSpecifierModule } from 'igniteui-webcomponents-core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule, NumberFormatSpecifierDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcNumberFormatSpecifier } from 'igniteui-webcomponents-core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcDataLegendModule,
IgcCategoryChartModule,
IgcNumberFormatSpecifierModule
);
export class Sample {
private legend: IgcDataLegendComponent
private _numberFormatSpecifier1: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier1(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier1 == null)
{
let numberFormatSpecifier1: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier2 = new IgcNumberFormatSpecifier();
numberFormatSpecifier2.style = "currency";
numberFormatSpecifier2.currency = "USD";
numberFormatSpecifier2.currencyDisplay = "symbol";
numberFormatSpecifier2.maximumFractionDigits = 2;
numberFormatSpecifier2.minimumFractionDigits = 2;
numberFormatSpecifier1.push(numberFormatSpecifier2)
this._numberFormatSpecifier1 = numberFormatSpecifier1;
}
return this._numberFormatSpecifier1;
}
private chart: IgcCategoryChartComponent
private _numberFormatSpecifier3: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier3(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier3 == null)
{
let numberFormatSpecifier3: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier4 = new IgcNumberFormatSpecifier();
numberFormatSpecifier4.style = "currency";
numberFormatSpecifier4.currency = "USD";
numberFormatSpecifier4.currencyDisplay = "symbol";
numberFormatSpecifier4.maximumFractionDigits = 2;
numberFormatSpecifier4.minimumFractionDigits = 2;
numberFormatSpecifier3.push(numberFormatSpecifier4)
this._numberFormatSpecifier3 = numberFormatSpecifier3;
}
return this._numberFormatSpecifier3;
}
private _numberFormatSpecifier5: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier5(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier5 == null)
{
let numberFormatSpecifier5: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier6 = new IgcNumberFormatSpecifier();
numberFormatSpecifier6.style = "currency";
numberFormatSpecifier6.currency = "USD";
numberFormatSpecifier6.currencyDisplay = "symbol";
numberFormatSpecifier6.minimumFractionDigits = 0;
numberFormatSpecifier5.push(numberFormatSpecifier6)
this._numberFormatSpecifier5 = numberFormatSpecifier5;
}
return this._numberFormatSpecifier5;
}
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcDataLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
legend.target = this.chart;
legend.valueFormatSpecifiers = this.numberFormatSpecifier1;
chart.dataSource = this.highestGrossingMovies;
chart.dataToolTipValueFormatSpecifiers = this.numberFormatSpecifier3;
chart.yAxisLabelFormatSpecifiers = this.numberFormatSpecifier5;
}
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);
DataLegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
NumberFormatSpecifierDescriptionModule.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="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-data-legend
name="legend"
id="legend"
value-format-string="{0} Billion">
</igc-data-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
final-value-annotations-precision="2"
data-tool-tip-value-format-string="{0} Billion"
y-axis-label-format="{0}B">
</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 차트에서는 숫자 또는 시간 축의 범위 최소값 및 최대값 범위를 정의할 수 있습니다. 범위 최소값은 축의 가장 낮은 값이고 범위 최대값은 축의 가장 높은 값입니다. 및 yAxisMaximumValue 옵션을 설정하여 yAxisMinimumValue 설정합니다.
기본적으로 차트는 데이터의 해당 최저 및 최고 값 포인트를 기반으로 숫자 및 시간 축 범위의 최소값과 최대값을 계산하지만 이 자동 계산은 모든 경우에 데이터 포인트 세트에 적합하지 않을 수 있습니다. 예를 들어, 데이터의 최소값이 850인 경우 yAxisMinimumValue를 800으로 설정하여 축 최소값과 데이터 포인트의 최저값 사이에 공백 값 50이 있도록 할 수 있습니다. yAxisMaximumValue 속성을 사용하여 데이터 포인트의 축 최소값과 최대값에 동일한 아이디어를 적용할 수 있습니다.
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 { 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,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private yAxisMinimumValue: IgcPropertyEditorPropertyDescriptionComponent
private yAxisMaximumValue: 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 yAxisMinimumValue = this.yAxisMinimumValue = document.getElementById('YAxisMinimumValue') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateYAxisMinimumValue = this.editorChangeUpdateYAxisMinimumValue.bind(this);
var yAxisMaximumValue = this.yAxisMaximumValue = document.getElementById('YAxisMaximumValue') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateYAxisMaximumValue = this.editorChangeUpdateYAxisMaximumValue.bind(this);
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
yAxisMinimumValue.changed = this.editorChangeUpdateYAxisMinimumValue;
yAxisMaximumValue.changed = this.editorChangeUpdateYAxisMaximumValue;
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;
}
public editorChangeUpdateYAxisMinimumValue(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var yAxisMinimumVal = args.newValue;
this.chart.yAxisMinimumValue = parseInt(yAxisMinimumVal);
}
public editorChangeUpdateYAxisMaximumValue(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var yAxisMaximumVal = args.newValue;
this.chart.yAxisMaximumValue = parseInt(yAxisMaximumVal);
}
}
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="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="YAxisMinimumValueHandler"
name="YAxisMinimumValue"
id="YAxisMinimumValue"
label="Y Axis Minimum Value"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
drop-down-values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="YAxisMaximumValueHandler"
name="YAxisMaximumValue"
id="YAxisMaximumValue"
label="Y Axis Maximum Value"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
drop-down-values="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
primitive-value="150">
</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"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Line"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-minimum-value="0"
y-axis-maximum-value="150">
</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
축 모드 및 배율
IgcFinancialChartComponent 및 IgcCategoryChartComponent 컨트롤에서는 yAxisIsLogarithmic 속성이 true로 설정된 경우 데이터가 y축을 따라 로그 눈금으로 표시되는지, 이 속성이 false(기본값)로 설정된 경우 선형 눈금으로 표시되는지 선택할 수 있습니다. yAxisLogarithmBase 속성을 사용하면 로그 스케일의 기준을 기본값 10에서 다른 정수 값으로 변경할 수 있습니다.
IgcFinancialChartComponent 및 컨트롤을 사용하면 Numeric 및 PercentChange 모드를 제공하는 yAxisMode 속성을 사용하여 y축을 따라 데이터가 표시되는 방식을 선택할 수 있습니다. Numeric 모드는 정확한 값으로 데이터를 표시하는 반면 PercentChange 모드는 제공된 첫 번째 데이터 포인트에 대한 백분율 변화로 데이터를 표시합니다. 기본값은 Numeric 모드입니다.
yAxisMode 속성 외에도 IgcFinancialChartComponent 컨트롤에는 x축에 대한 Time 및 Ordinal 모드를 제공하는 xAxisMode 속성이 있습니다. Time 모드는 데이터의 공백을 위해 x축을 따라 공간을 렌더링합니다(예: 주말이나 공휴일에는 주식 거래가 없음). Ordinal 모드는 데이터가 존재하지 않는 날짜 영역을 축소합니다. 기본값은 Ordinal 모드입니다.
export class StocksUtility {
public static priceStart: number = 200;
public static priceRange: number = 1;
public static volumeRange: number = 1000;
public static volumeStart: number = 20000000;
public static getStocksFrom(dateEnd: Date, years: number): any {
const dateStart: Date = this.addYears(dateEnd, -years);
return this.getStocksBetween(dateStart, dateEnd, true);
}
public static getStocksItems(points: number, intervalMinutes?: number): any {
if (intervalMinutes === undefined || intervalMinutes <= 0) {
intervalMinutes = 60;
}
const today: Date = new Date();
const year: number = today.getFullYear();
const dateEnd: Date = new Date(year, 11, 1);
const dateStart: Date = this.addHours(dateEnd, -points);
return this.getStocksBetween(dateStart, dateEnd, false, intervalMinutes);
}
// generates stocks data for specified number of months, with each item separated by specified interval in minutes
public static getStocksForMonths(rangeInMonths?: number, intervalMinutes?: number, stockName?: string): any {
if (rangeInMonths === undefined) {
rangeInMonths = 6;
}
const dateEnd: Date = new Date();
const dateStart: Date = this.addMonths(dateEnd, -rangeInMonths);
return this.getStocksBetween(dateStart, dateEnd, true, intervalMinutes, stockName);
}
public static getStocksBetween(dateStart: Date, dateEnd: Date, useRounding?:
boolean, intervalMinutes?: number, stockName?: string): any {
if (intervalMinutes === undefined || intervalMinutes <= 0) {
intervalMinutes = 60;
}
let time: Date = this.addDays(dateStart, 0);
let v: number = this.volumeStart;
let o: number = this.priceStart;
let h: number = o + (Math.random() * this.priceRange);
let l: number = o - (Math.random() * this.priceRange);
let c: number = l + (Math.random() * (h - l));
const stock: any[] = [];
while (time.getTime() < dateEnd.getTime()) {
stock.push({ date: time, open: o, high: h, low: l, close: c, volume: v });
o = c + ((Math.random() - 0.5) * this.priceRange);
if (o < 0) {
o = Math.abs(o) + 10;
}
h = o + (Math.random() * this.priceRange);
l = o - (Math.random() * this.priceRange);
c = l + (Math.random() * (h - l));
v = v + ((Math.random() - 0.5) * this.volumeRange);
if (v < 0) {
v = Math.abs(v) + 10000;
}
if (useRounding === undefined || useRounding) {
o = Math.round(o * 100) / 100;
h = Math.round(h * 100) / 100;
l = Math.round(l * 100) / 100;
c = Math.round(c * 100) / 100;
v = Math.round(v * 100) / 100;
}
time = this.addMinutes(time, intervalMinutes);
}
if (stockName === undefined) {
stockName = "Stock Prices";
}
// setting data intent for Series Title
(stock as any).__dataIntents = {
close: ["SeriesTitle/" + stockName]
};
// console.log("start " + this.ToString(dateStart));
// console.log("end " + this.ToString(dateEnd));
console.log("stocks " + stock.length);
return stock;
}
public static addMinutes(date: Date, minutes: number): Date {
return new Date(date.getTime() + minutes * 60 * 1000);
}
public static addHours(date: Date, hours: number): Date {
return this.addMinutes(date, hours * 60);
}
public static addDays(date: Date, days: number): Date {
return this.addHours(date, days * 24);
}
public static addMonths(date: Date, months: number): Date {
return this.addDays(date, 31 * months);
}
public static addYears(date: Date, years: number): Date {
return new Date(date.getFullYear() + years, date.getMonth(), date.getDate());
}
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 getYear(date: Date): number {
return date.getFullYear();
}
public static getQuarter(date: Date): number {
return Math.round((date.getMonth() + 2) / 3);
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], interval?: number): any {
const lastItem: any = this.getLastItem(array);
if (interval === undefined || interval <= 0) {
interval = 60;
}
const time: Date = this.addMinutes(lastItem.date, interval);
let v: number = lastItem.volume;
let o: number = lastItem.open;
let h: number = lastItem.high;
let l: number = lastItem.low;
let c: number = lastItem.close;
o = c + ((Math.random() - 0.5) * this.priceRange);
if (o < 0) {
o = Math.abs(o) + 2;
}
h = o + (Math.random() * this.priceRange);
l = o - (Math.random() * this.priceRange);
c = l + (Math.random() * (h - l));
v = v + ((Math.random() - 0.5) * this.volumeRange);
if (v < 0) {
v = Math.abs(v) + 10000;
}
return { date: time, open: o, high: h, low: l, close: c, volume: v };
}
public static toString(date: Date): string {
const months: string[] = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const index: number = date.getMonth();
return months[index] + " " + date.getDay() + " " + date.getFullYear();
}
}
tsimport { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { FinancialChartXAxisMode } from 'igniteui-webcomponents-charts';
import { FinancialChartYAxisMode } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksUtility } from './StocksUtility';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartAxisTypes {
private chart: IgcFinancialChartComponent;
private xAxisMode = FinancialChartXAxisMode.Ordinal;
private yAxisMode = FinancialChartYAxisMode.Numeric;
private yAxisIsLogarithmic = false;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.dataSource = this.initData();
this.chart.xAxisMode = this.xAxisMode;
this.chart.yAxisMode = this.yAxisMode;
this.chart.yAxisIsLogarithmic = this.yAxisIsLogarithmic;
let xAxisSelect = <HTMLSelectElement>document.getElementById('xAxisSelect');
xAxisSelect!.addEventListener('change', this.onXAxisModeChanged);
xAxisSelect!.value = "Ordinal";
let yAxisSelect = <HTMLSelectElement>document.getElementById('yAxisSelect');
yAxisSelect!.addEventListener('change', this.onYAxisModeChanged);
yAxisSelect!.value = "Numeric";
let yAxisIsLogarithmicSelect = document.getElementById('yAxisIsLogarithmicSelect');
yAxisIsLogarithmicSelect!.addEventListener('change', this.onYAxisIsLogarithmicChanged);
}
public onXAxisModeChanged = (e: any) => {
const mode: string = e.target.value;
if (mode === 'Time') {
this.xAxisMode = FinancialChartXAxisMode.Time;
} else if (mode === 'Ordinal') {
this.xAxisMode = FinancialChartXAxisMode.Ordinal;
}
this.chart.xAxisMode = this.xAxisMode;
}
public onYAxisModeChanged = (e: any) => {
const mode: string = e.target.value;
if (mode === 'PercentChange') {
this.yAxisMode = FinancialChartYAxisMode.PercentChange;
} else if (mode === 'Numeric') {
this.yAxisMode = FinancialChartYAxisMode.Numeric;
}
this.chart.yAxisMode = this.yAxisMode;
}
public onYAxisIsLogarithmicChanged = (e: any) => {
this.yAxisIsLogarithmic = e.target.checked;
this.chart.yAxisIsLogarithmic = this.yAxisIsLogarithmic;
}
initData(): any[] {
return StocksUtility.getStocksForMonths(12);
}
}
new FinancialChartAxisTypes();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartAxisTypes</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">X-Axis Mode:</label>
<select id="xAxisSelect">
<option>Time</option>
<option>Ordinal</option>
</select>
<label class="options-label">Y-Axis Mode:</label>
<select id="yAxisSelect">
<option>PercentChange</option>
<option>Numeric</option>
</select>
<label class="options-label">
<input id="yAxisIsLogarithmicSelect" type="checkbox"></input> Y-Axis-IsLogarithmic
</label>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-financial-chart id="chart" width="100%" height="100%"
chart-type="Line"
thickness="2">
</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
축 간격 예
xAxisGap Web Components 차트의 속성은 그려진 계열의 세로 막대 또는 가로 막대 사이의 간격을 결정합니다. 이 속성은 0.0에서 1.0 사이의 숫자 값을 허용합니다. 이 값은 계열 사이의 사용 가능한 픽셀 수에서 간격의 상대적 너비를 나타냅니다. 이 속성을 0으로 설정하면 계열 간에 렌더링되는 간격이 없음을 의미하고, 1로 설정하면 사용 가능한 최대 간격이 렌더링됩니다.
xAxisMaximumGap Web Components 차트의 속성은 허용할 최대 갭 값을 결정합니다. 이 기본값은 1.0으로 설정되지만 설정 xAxisGap 내용에 따라 변경할 수 있습니다.
xAxisMinimumGapSize Web Components 차트의 속성은 가능한 경우 범주 간의 간격에 사용할 최소 픽셀 수를 결정합니다.
다음 예는 뉴욕시 센트럴 파크의 평균 최대 온도(섭씨)를 보여줍니다. 기둥 차트와 xAxisGap 처음에는 1로 설정되므로 열 사이에 전체 범주의 너비가 있게 됩니다. 이 예에는 간격을 구성할 수 있는 슬라이더가 있어 다양한 값의 역할을 확인할 수 있습니다.
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 { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
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 propertyEditorPanel1: IgcPropertyEditorPanelComponent
private xAxisGap: IgcPropertyEditorPropertyDescriptionComponent
private xAxisMaximumGap: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var xAxisGap = this.xAxisGap = document.getElementById('XAxisGap') as IgcPropertyEditorPropertyDescriptionComponent;
var xAxisMaximumGap = this.xAxisMaximumGap = document.getElementById('XAxisMaximumGap') 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;
}
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="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisGap"
name="XAxisGap"
id="XAxisGap"
label="X Axis - Gap"
should-override-default-editor="true"
value-type="Slider"
primitive-value="0.5"
min="0"
max="1.5"
step="0.1">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="XAxisMaximumGap"
name="XAxisMaximumGap"
id="XAxisMaximumGap"
label="Maximum Gap"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
drop-down-values="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
primitive-value="0.5">
</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"
included-properties="year, europe, china, america"
chart-type="Column"
crosshairs-snap-to-data="true"
y-axis-title="TWh"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
x-axis-gap="0.5"
x-axis-maximum-gap="1.5">
</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
축 중첩 예
xAxisOverlap Web Components 차트의 속성을 사용하면 플롯된 계열의 렌더링된 열 또는 막대의 겹침을 설정할 수 있습니다. 이 속성은 -1.0에서 1.0 사이의 숫자 값을 허용합니다. 이 값은 각 계열 전용으로 사용 가능한 픽셀 수에서 상대적인 겹침을 나타냅니다. 이 속성을 음수 값(-1.0까지)으로 설정하면 범주가 서로 밀려나 범주 사이에 간격이 생깁니다. 반대로 이 속성을 양수 값(최대 1.0)으로 설정하면 범주가 서로 겹칩니다. 값 1은 차트가 범주를 서로의 위에 렌더링하도록 지시합니다.
다음 예에서는 프랜차이즈의 총 세계 박스오피스 수익과 시리즈에서 가장 높은 수익을 올린 영화를 비교하여 전 세계에서 가장 높은 수익을 올린 영화 프랜차이즈를 비교합니다. 기둥 차트와 xAxisOverlap 처음에는 1로 설정되므로 열이 서로 완전히 겹칩니다. 이 예에는 서로 다른 값의 역할을 확인할 수 있도록 겹침을 구성할 수 있는 슬라이더가 있습니다.
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 { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
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 legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private xAxisOverlap: 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 xAxisOverlap = this.xAxisOverlap = document.getElementById('XAxisOverlap') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
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
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisOverlap"
name="XAxisOverlap"
id="XAxisOverlap"
label="X Axis - Overlap"
should-override-default-editor="true"
value-type="Slider"
min="0"
max="1"
step="0.1"
primitive-value="0">
</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"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
crosshairs-snap-to-data="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
x-axis-overlap="1">
</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
추가 리소스
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.