Angular 차트 오버레이
Angular IgxDataChartComponent
는 IgxValueOverlayComponent
를 사용하여 정의한 단일 숫자 값에 수평 또는 수직 선을 배치할 수 있도록 합니다. 이를 통해 특정 시리즈의 평균 또는 중앙값과 같은 데이터를 시각화하는 데 도움이 될 수 있습니다.
Angular Value Overlay Example
다음 예에서는 몇 개의 수평 값 오버레이가 표시된 기둥 차트 보여줍니다.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { Injectable } from "@angular/core" ;
@Injectable ()
export class SharedData {
public static getEnergyProduction ( ) {
const data: any [] = [
{
Coal : 400000000 ,
Country : "Canada" ,
Gas : 175000000 ,
Hydro : 350000000 ,
Nuclear : 225000000 ,
Oil : 100000000
},
{
Coal : 925000000 ,
Country : "China" ,
Gas : 350000000 ,
Hydro : 625000000 ,
Nuclear : 400000000 ,
Oil : 200000000
},
{
Coal : 550000000 ,
Country : "Russia" ,
Gas : 250000000 ,
Hydro : 425000000 ,
Nuclear : 475000000 ,
Oil : 200000000
},
{
Coal : 450000000 ,
Country : "Australia" ,
Gas : 150000000 ,
Hydro : 350000000 ,
Nuclear : 175000000 ,
Oil : 100000000
},
{
Coal : 800000000 ,
Country : "United States" ,
Gas : 475000000 ,
Hydro : 750000000 ,
Nuclear : 575000000 ,
Oil : 250000000
},
{
Coal : 375000000 ,
Country : "France" ,
Gas : 350000000 ,
Hydro : 325000000 ,
Nuclear : 275000000 ,
Oil : 150000000
}
];
return data;
}
public static getItems(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 high = value + (Math .random() * 2 );
const low = value - (Math .random() * 2 );
const v = Math .abs(Math .round(value * 10 ) / 10 );
const h = Math .abs(Math .round(high * 10 ) / 10 );
const l = Math .abs(Math .round(low * 10 ) / 10 );
data.push({ Label : i.toString(), Value : v, High : h, Low : l });
}
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;
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxValueOverlayModule, IgxLegendModule } from "igniteui-angular-charts" ;
import { SharedData } from "./SharedData" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxValueOverlayModule,
IgxLegendModule
],
providers : [SharedData],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit } from "@angular/core" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
public data: any [];
constructor ( ) {
this .initData();
}
public initData ( ) {
this .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 }
];
}
}
ts コピー <div class ="container vertical" >
<igx-legend #legend orientation ="horizontal" > </igx-legend >
<igx-data-chart #chart height ="100%" width ="100%" [dataSource ]="data" >
<igx-category-x-axis #xAxis label ="Label" > </igx-category-x-axis >
<igx-numeric-y-axis #yAxis minimumValue =0 maximumValue =10 > </igx-numeric-y-axis >
<igx-column-series [xAxis ]="xAxis" [yAxis ]="yAxis" valueMemberPath ="Value" showDefaultTooltip =true
markerType ="None" > </igx-column-series >
<igx-value-overlay [axis ]="yAxis" value =2.0 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =3.6 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =5.8 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =1.0 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =8.0 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =7.0 thickness =5 > </igx-value-overlay >
<igx-value-overlay [axis ]="yAxis" value =5.0 thickness =5 > </igx-value-overlay >
</igx-data-chart >
</div >
html コピー
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Angular Value Overlay Properties
데이터 바인딩에 ItemsSource
사용하는 다른 계열 유형과 달리 값 오버레이는 ValueMemberPath
속성을 사용하여 단일 숫자 값을 바인딩합니다. 또한 값 오버레이를 사용하려면 사용할 단일 axis
정의해야 합니다. X축을 사용하면 값 오버레이가 수직선이 되고, Y축을 사용하면 수평선이 됩니다.
숫자 X 또는 Y 축을 사용하는 경우 ValueMemberPath
속성은 값 오버레이를 그릴 축의 실제 숫자 값을 반영해야 합니다. 범주 X 또는 Y 축을 사용하는 경우 ValueMemberPath
값 오버레이를 표시할 범주의 인덱스를 반영해야 합니다.
숫자 각도 축과 함께 값 오버레이를 사용하면 차트 중앙에서 선으로 나타나고 숫자 반경 축을 사용하면 원으로 나타납니다.
IgxValueOverlayComponent
모양 속성은 IgxSeriesComponent
에서 상속되므로 brush
및 thickness
을 사용할 수 있으며 다른 유형의 시리즈와 동일한 방식으로 작동합니다.
IgxValueOverlayComponent
에 축 주석을 표시하여 소유 축에 오버레이 값을 표시할 수도 있습니다. 이를 표시하려면 isAxisAnnotationEnabled
속성을 true로 설정하면 됩니다.
Angular Value Layer
Angular 차팅 구성 요소는 최소값, 최대값, 평균값 등 데이터의 다양한 초점을 표시하기 위해 값 선을 사용하는 기능도 제공합니다.
IgxCategoryChartComponent
및 IgxFinancialChartComponent
구성 요소에 IgxValueLayerComponent
적용하려면 차트에서 valueLines
속성을 설정하면 됩니다. 이 속성은 ValueLayerValueMode
열거형 컬렉션을 사용합니다. 차트의 valueLines
컬렉션에 여러 ValueLayerValueMode
열거를 추가하여 동일한 차트에서 여러 값 계층을 혼합하고 일치시킬 수 있습니다.
IgxDataChartComponent
에서는 차트의 IgxSeriesComponent
컬렉션에 IgxValueLayerComponent
추가한 다음 ValueMode
속성을 ValueLayerValueMode
열거 중 하나로 설정하여 이를 수행합니다. 각 열거형과 그 의미는 다음과 같습니다.
IgxValueLayerComponent
요소를 사용할 때 특정 계열이 고려되지 않도록 하려면 레이어에서 targetSeries
속성을 설정하면 됩니다. 이렇게 하면 레이어가 정의한 계열을 대상으로 지정하게 됩니다. 단일 IgxDataChartComponent
내에 원하는 만큼 많은 IgxValueLayerComponent
요소를 가질 수 있습니다.
다음 샘플은 IgxCategoryChartComponent
에서 다양한 valueLines
의 사용법을 보여줍니다.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
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 ));
}
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts' ;
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts' ;
import { EnumUtil } from 'igniteui-angular-core' ;
import { IgxLegendComponent } from 'igniteui-angular-charts' ;
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
defineAllComponents();
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxLegendComponent
@ViewChild ("propertyEditor" , { static : true } )
private propertyEditor: IgxPropertyEditorPanelComponent
@ViewChild ("valueListEditor" , { static : true } )
private valueListEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
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 constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
public editorChangeUpdateValueLines({ sender, args }: { sender : any , args : IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
var chart = this .chart;
var valueLineType = item.primitiveValue;
chart.valueLines = valueLineType;
}
}
ts コピー <div class ="container vertical sample" >
<div class ="options vertical" >
<igx-property-editor-panel
name ="PropertyEditor"
#propertyEditor
[componentRenderer ]="renderer"
[target ]="chart"
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true" >
<igx-property-editor-property-description
propertyPath ="ValueListHandler"
name ="ValueListEditor"
#valueListEditor
label ="Value List"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownValues ="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
dropDownNames ="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
primitiveValue ="Auto"
(changed )="this.editorChangeUpdateValueLines($event)" >
</igx-property-editor-property-description >
</igx-property-editor-panel >
</div >
<div class ="legend-title" >
Renewable Electricity Generated
</div >
<div class ="legend" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, america, europe"
chartType ="Column"
[legend ]="legend"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
crosshairsDisplayMode ="None"
isTransitionInEnabled ="false"
yAxisMinimumValue ="0"
yAxisMaximumValue ="100" >
</igx-category-chart >
</div >
</div >
html コピー
Angular Financial Overlays
Angular Stock Chart 에서는 내장된 재무 오버레이와 지표를 표시할 수도 있습니다.
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.