Angular Toolbar 구성 요소는 주로 차트 구성 요소와 함께 사용되는 UI 작업을 위한 동반 컨테이너입니다. 툴바는 IgxDataChartComponent
또는 IgxCategoryChartComponent
구성 요소에 연결될 때 속성 및 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 프로젝트에 대한 사용자 정의 도구를 만들어 최종 사용자가 변경 사항을 제공할 수 있으므로 무한한 양의 사용자 정의가 가능합니다.
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 { IgxLegendModule, IgxCategoryChartModule, IgxCategoryChartToolbarModule } from 'igniteui-angular-charts' ;
import { IgxToolbarModule } from 'igniteui-angular-layouts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxToolbarModule,
IgxCategoryChartModule,
IgxCategoryChartToolbarModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
import { IgxToolbarComponent } from 'igniteui-angular-layouts' ;
@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 ("toolbar" , { static : true } )
private toolbar: IgxToolbarComponent
@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;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="legend-title" >
Renewable Electricity Generated
</div >
<div class ="aboveContentSplit" >
<div class ="aboveContentLeftContainer" >
<igx-toolbar
name ="toolbar"
#toolbar
[target ]="chart"
orientation ="Horizontal" >
</igx-toolbar >
</div >
<div class ="aboveContentRightContainer" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
chartType ="Line"
isHorizontalZoomEnabled ="true"
isVerticalZoomEnabled ="true"
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, europe, china, america"
[legend ]="legend"
yAxisTitle ="TWh"
yAxisTitleLeftMargin ="10"
yAxisTitleRightMargin ="5"
yAxisLabelLeftMargin ="0"
yAxisLabelLocation ="OutsideRight"
isTransitionInEnabled ="true" >
</igx-category-chart >
</div >
</div >
html コピー
.aboveContentSplit {
display : flex;
flex-direction : row;
}
.aboveContentLeftContainer {
margin-left : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-start;
align-items : flex-end;
}
.aboveContentRightContainer {
margin-right : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-end;
align-items : flex-end;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
종속성
Ignite UI for Angular 설치:
npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core
cmd
IgxDataChartComponent
컴포넌트 및 해당 기능과 함께 IgxToolbarComponent
사용할 때 다음 모듈이 필요합니다.
import { IgxToolbarModule } from 'igniteui-angular-layouts' ;
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts' ;
@NgModule ({
imports : [
IgxToolbarModule,
IgxDataChartToolbarModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxDataChartCategoryTrendLineModule
]
})
export class AppModule {}
ts
import { IgxToolbarModule } from 'igniteui-react-layouts' ;
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts' ;
IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();
ts
용법
다음은 도구 모음에 추가할 수 있는 다양한 IgxToolActionComponent
항목 목록입니다.
이러한 도구 각각은 마우스 클릭으로 트리거되는 OnCommand
이벤트를 노출합니다.
IgxToolActionComponent
객체의 overlayId
, beforeId
및 afterId
속성을 사용하여 새로운 도구와 기존 도구의 위치를 변경하고 숨김으로 표시할 수 있습니다. ToolActions는 visibility
속성도 노출합니다.
다음 예에서는 기본 제공 항목을 모두 숨기는 방법을 보여줍니다. 확대/축소 재설정 그리고 분석메뉴 메뉴 도구 작업. 새로운 인스턴스 확대/축소 재설정 도구 작업이 추가되어 확대/축소메뉴 을 사용하여 afterId
속성을 할당하고 축소 . 그러면 새 재설정 도구가 화면 하단에 표시됩니다. 확대/축소메뉴 .
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 { IgxToolbarModule } from 'igniteui-angular-layouts' ;
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxToolbarModule,
IgxDataChartToolbarModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxDataChartCategoryTrendLineModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts' ;
import { IgxDataChartComponent, IgxSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts' ;
import { IgxToolbarComponent, IgxToolActionCheckboxComponent, IgxToolActionLabelComponent, IgxToolActionIconMenuComponent } from 'igniteui-angular-layouts' ;
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("toolbar" , { static : true } )
private toolbar: IgxToolbarComponent
@ViewChild ("enableTooltipsLabel" , { static : true } )
private enableTooltipsLabel: IgxToolActionCheckboxComponent
@ViewChild ("zoomResetHidden" , { static : true } )
private zoomResetHidden: IgxToolActionLabelComponent
@ViewChild ("zoomResetLabel" , { static : true } )
private zoomResetLabel: IgxToolActionLabelComponent
@ViewChild ("analyzeMenu" , { static : true } )
private analyzeMenu: IgxToolActionIconMenuComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxDataChartComponent
@ViewChild ("xAxis" , { static : true } )
private xAxis: IgxCategoryXAxisComponent
@ViewChild ("yAxis" , { static : true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild ("lineSeries1" , { static : true } )
private lineSeries1: IgxLineSeriesComponent
@ViewChild ("lineSeries2" , { static : true } )
private lineSeries2: IgxLineSeriesComponent
@ViewChild ("lineSeries3" , { static : true } )
private lineSeries3: IgxLineSeriesComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity (): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
public toolbarToggleTooltip({ sender, args }: { sender : any , args : IgxToolCommandEventArgs }): void {
var target = this .chart;
switch (args.command.commandId)
{
case "EnableTooltips" :
var enable = args.command.argumentsList[0 ].value as boolean ;
if (enable)
{
target.series.add(new IgxDataToolTipLayerComponent());
}
else
{
var toRemove = null ;
for (var i = 0 ; i < target.actualSeries.length; i++) {
let s = target.actualSeries[i] as IgxSeriesComponent;
if (s instanceof IgxDataToolTipLayerComponent)
{
toRemove = s;
}
}
if (toRemove != null )
{
target.series.remove(toRemove);
}
}
break ;
}
}
}
ts コピー <div class ="container vertical sample" >
<div class ="aboveContentSplit" >
<div class ="aboveContentLeftContainer" >
<igx-toolbar
name ="toolbar"
#toolbar
[target ]="chart"
orientation ="Horizontal"
(onCommand )="this.toolbarToggleTooltip($event)" >
<igx-tool-action-checkbox
name ="EnableTooltipsLabel"
#enableTooltipsLabel
title ="Enable Tooltips"
beforeId ="ZoomReset"
commandId ="EnableTooltips" >
</igx-tool-action-checkbox >
<igx-tool-action-label
name ="zoomResetHidden"
#zoomResetHidden
overlayId ="ZoomReset"
visibility ="Collapsed" >
</igx-tool-action-label >
<igx-tool-action-label
name ="zoomResetLabel"
#zoomResetLabel
title ="Reset"
afterId ="ZoomOut"
iconName ="reset"
iconCollectionName ="ChartToolbarIcons"
commandId ="ZoomReset" >
</igx-tool-action-label >
<igx-tool-action-icon-menu
name ="AnalyzeMenu"
#analyzeMenu
overlayId ="AnalyzeMenu"
visibility ="Collapsed" >
</igx-tool-action-icon-menu >
</igx-toolbar >
</div >
<div class ="aboveContentRightContainer" >
</div >
</div >
<div class ="container fill" >
<igx-data-chart
computedPlotAreaMarginMode ="Series"
isHorizontalZoomEnabled ="true"
isVerticalZoomEnabled ="true"
name ="chart"
#chart >
<igx-category-x-axis
name ="xAxis"
#xAxis
[dataSource ]="countryRenewableElectricity"
label ="year" >
</igx-category-x-axis >
<igx-numeric-y-axis
name ="yAxis"
#yAxis
title ="TWh"
labelLocation ="OutsideRight" >
</igx-numeric-y-axis >
<igx-line-series
name ="lineSeries1"
#lineSeries1
title ="Electricity"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="countryRenewableElectricity"
valueMemberPath ="america" >
</igx-line-series >
<igx-line-series
name ="LineSeries2"
#lineSeries2
title ="Electricity"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="countryRenewableElectricity"
valueMemberPath ="europe" >
</igx-line-series >
<igx-line-series
name ="LineSeries3"
#lineSeries3
title ="Electricity"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="countryRenewableElectricity"
valueMemberPath ="china" >
</igx-line-series >
</igx-data-chart >
</div >
</div >
html コピー
.aboveContentSplit {
display : flex;
flex-direction : row;
}
.aboveContentLeftContainer {
margin-left : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-start;
align-items : flex-end;
}
.aboveContentRightContainer {
margin-right : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-end;
align-items : flex-end;
}
scss コピー
Angular 데이터 차트 통합
Angular Toolbar에는 Target
속성이 포함되어 있습니다. 이는 아래 코드에 표시된 IgxDataChartComponent
와 같은 구성 요소를 연결하는 데 사용됩니다.
<div class ="legend" >
<igx-toolbar
name ="toolbar"
[target ]="chart"
#toolbar >
</igx-toolbar >
</div >
<div class ="container fill" >
<igx-data-chart
name ="chart"
#chart >
</igx-data-chart >
html
IgxDataChartComponent
툴바와 연결되면 기존 IgxToolActionComponent
항목과 메뉴가 여러 개 사용 가능해집니다. 내장된 Angular IgxDataChartComponent
도구 작업과 관련 overlayId
목록은 다음과 같습니다.
확대/축소 작업
추세 조치
이미지에 저장 작업
SVG 아이콘
도구를 수동으로 추가할 때 이 RenderIconFromText
방법을 사용하여 아이콘을 할당할 수 있습니다. 이 메서드에는 세 가지 매개 변수가 있습니다. 첫 번째는 도구에 정의된 아이콘 컬렉션 이름입니다. iconCollectionName
두 번째는 도구에 정의된 아이콘의 이름(예: iconName
SVG 문자열 추가)입니다.
<igx-tool-action-label
title ="Custom Icon"
iconName ="CustomIcon"
iconCollectionName ="CustomCollection" >
</igx-tool-action-label >
html
public toolbarCustomIconOnViewInit(): void {
const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>' ;
this .toolbar.registerIconFromText("CustomCollection" , "CustomIcon" , icon);
}
ts
public toolbarCustomIconOnViewInit(): void {
const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>' ;
this .toolbar.registerIconFromText("CustomCollection" , "CustomIcon" , icon);
}
ts
수직 방향
기본적으로 Angular 도구 모음은 수평으로 표시되지만, orientation
속성을 설정하여 수직으로 표시할 수도 있습니다.
<igx-toolbar orientation ="Vertical" />
html
다음 예제는 Angular Toolbar의 수직 방향을 보여줍니다.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 { IgxToolbarModule } from 'igniteui-angular-layouts' ;
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxToolbarModule,
IgxDataChartToolbarModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxAnnotationLayerProxyModule,
IgxDataChartCategoryTrendLineModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxToolbarComponent } from 'igniteui-angular-layouts' ;
import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("toolbar" , { static : true } )
private toolbar: IgxToolbarComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxDataChartComponent
@ViewChild ("xAxis" , { static : true } )
private xAxis: IgxCategoryXAxisComponent
@ViewChild ("yAxis" , { static : true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild ("lineSeries1" , { static : true } )
private lineSeries1: IgxLineSeriesComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity (): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="aboveContent" >
<igx-toolbar
name ="toolbar"
#toolbar
[target ]="chart"
orientation ="Vertical" >
</igx-toolbar >
</div >
<div class ="container fill" >
<igx-data-chart
isHorizontalZoomEnabled ="true"
name ="chart"
#chart >
<igx-category-x-axis
name ="xAxis"
#xAxis
[dataSource ]="countryRenewableElectricity"
label ="year" >
</igx-category-x-axis >
<igx-numeric-y-axis
name ="yAxis"
#yAxis
title ="TWh"
labelLocation ="OutsideRight" >
</igx-numeric-y-axis >
<igx-line-series
name ="lineSeries1"
#lineSeries1
title ="Electricity"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="countryRenewableElectricity"
valueMemberPath ="america" >
</igx-line-series >
</igx-data-chart >
</div >
</div >
html コピー
색상 편집기
Angular 툴바에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 Command 이벤트와 함께 작동하여 응용 프로그램에 사용자 정의 스타일을 수행합니다.
<igx-toolbar
name ="toolbar"
#toolbar >
<igx-tool-action-color-editor
title ="Series Brush"
name ="colorEditorTool"
#colorEditorTool >
</igx-tool-action-color-editor >
</igx-toolbar >
html
<igc-toolbar
name="toolbar"
id="toolbar" >
<igc-tool-action-color-editor
title ="Series Brush Color"
name ="colorEditorTool"
id ="colorEditorTool" >
</igc-tool-action-color-editor >
</igc-toolbar>
ts
다음 예제에서는 색 편집기 도구를 사용하여 Angular 데이터 차트 시리즈 브러시의 스타일을 지정하는 방법을 보여 줍니다.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 { IgxToolbarModule, IgxToolActionComboModule, IgxToolActionColorEditorModule } from 'igniteui-angular-layouts' ;
import { IgxDataChartToolbarModule, IgxDataLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxToolbarModule,
IgxToolActionComboModule,
IgxToolActionColorEditorModule,
IgxDataChartToolbarModule,
IgxDataLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCategoryModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts' ;
import { IgxDataChartComponent, IgxSeriesComponent } from 'igniteui-angular-charts' ;
import { IgxToolbarComponent, IgxToolActionColorEditorComponent } from 'igniteui-angular-layouts' ;
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("toolbar" , { static : true } )
private toolbar: IgxToolbarComponent
@ViewChild ("colorEditorTool" , { static : true } )
private colorEditorTool: IgxToolActionColorEditorComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxDataChartComponent
@ViewChild ("xAxis" , { static : true } )
private xAxis: IgxCategoryXAxisComponent
@ViewChild ("yAxis" , { static : true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild ("lineSeries1" , { static : true } )
private lineSeries1: IgxLineSeriesComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity (): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
public colorEditorToggleSeriesBrush({ sender, args }: { sender : any , args : IgxToolCommandEventArgs }): void {
var target = this .chart;
var color = args.command.argumentsList[0 ].value;
switch (args.command.commandId)
{
case "ToggleSeriesBrush" :
let series = target.contentSeries.first as IgxSeriesComponent;
series.brush = color;
break ;
}
}
}
ts コピー <div class ="container vertical sample" >
<div class ="aboveContentSplit" >
<div class ="aboveContentLeftContainer" >
<igx-toolbar
name ="toolbar"
#toolbar
[target ]="chart"
(onCommand )="this.colorEditorToggleSeriesBrush($event)" >
<igx-tool-action-color-editor
title ="Series Brush"
name ="colorEditorTool"
#colorEditorTool
commandId ="ToggleSeriesBrush" >
</igx-tool-action-color-editor >
</igx-toolbar >
</div >
<div class ="aboveContentRightContainer" >
</div >
</div >
<div class ="container fill" >
<igx-data-chart
isHorizontalZoomEnabled ="true"
name ="chart"
#chart >
<igx-category-x-axis
name ="xAxis"
#xAxis
[dataSource ]="countryRenewableElectricity"
label ="year" >
</igx-category-x-axis >
<igx-numeric-y-axis
name ="yAxis"
#yAxis
title ="TWh"
labelLocation ="OutsideRight" >
</igx-numeric-y-axis >
<igx-line-series
name ="lineSeries1"
#lineSeries1
title ="Electricity"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="countryRenewableElectricity"
valueMemberPath ="america"
markerType ="None" >
</igx-line-series >
</igx-data-chart >
</div >
</div >
html コピー
.aboveContentSplit {
display : flex;
flex-direction : row;
}
.aboveContentLeftContainer {
margin-left : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-start;
align-items : flex-end;
}
.aboveContentRightContainer {
margin-right : 1.25rem ;
display : flex;
flex-grow : 1 ;
justify-content : flex-end;
align-items : flex-end;
}
scss コピー
API 참조
추가 리소스