El componente de barra de herramientas Angular es un contenedor complementario para operaciones de interfaz de usuario que se utilizará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará de forma dinámica con un conjunto preestablecido de propiedades y elementos de herramientas cuando se vincule con nuestros componentes IgxDataChartComponent
o IgxCategoryChartComponent
. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales realizar cambios y ofrecer una cantidad infinita de opciones de personalización.
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 コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
Instale los Ignite UI for Angular diseños, entradas, gráficos y paquetes principales:
npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core
cmd
Los siguientes módulos son necesarios cuando se utiliza IgxToolbarComponent
con el componente IgxDataChartComponent
y sus características.
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
Uso
La siguiente es una lista de los diferentes elementos IgxToolActionComponent
que puede agregar a la barra de herramientas.
Cada una de estas herramientas expone un evento OnCommand
que se activa al hacer clic con el mouse.
Las herramientas nuevas y existentes se pueden reposicionar y marcar como ocultas usando las propiedades overlayId
, beforeId
y afterId
en el objeto IgxToolActionComponent
. ToolActions también expone una propiedad visibility
.
El siguiente ejemplo demuestra cómo ocultar las acciones de las herramientas de menú integradas ZoomReset y AnalyzeMenu . Se agrega una nueva instancia de la acción de la herramienta ZoomReset y se coloca dentro de ZoomMenu usando la propiedad afterId
y asignándola a ZoomOut . Esto asegurará que la nueva herramienta Restablecer se muestre en la parte inferior del ZoomMenu .
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 コピー
Integración Angular Gráfico de datos
La barra de herramientas Angular contiene una propiedad Target
. Esta se utiliza para vincular un componente, como IgxDataChartComponent
, como se muestra en el código siguiente:
<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
Varios elementos y menús preexistentes IgxToolActionComponent
se vuelven disponibles cuando IgxDataChartComponent
se vincula con la barra de herramientas. Aquí hay una lista de las acciones de herramienta integradas Angular IgxDataChartComponent
y su overlayId
asociado:
Acciones de zoom
Acciones de tendencia
AnalyzeMenu
: un IgxToolActionIconMenuComponent
que contiene varias opciones para configurar diferentes opciones del gráfico.
AnalyzeHeader
: encabezado de una subsección.
LinesMenu
: un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.
LinesHeader
: encabezado de sección del submenú para las siguientes tres herramientas:
TrendsMenu
: A sub menu containing tools for applying various trendlines to the IgxDataChartComponent
plot area.
TrendsHeader
: encabezado de sección de submenú para las siguientes tres herramientas:
HelpersHeader
: encabezado de una subsección.
SeriesAvg
: un IgxToolActionCheckboxComponent
que agrega o elimina un IgxValueLayerComponent
a la colección de series del gráfico utilizando ValueLayerValueMode
de tipo Average
.
ValueLabelsMenu
: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en el IgxDataChartComponent
área de la trama.
ValueLabelsHeader
: encabezado de sección del submenú para las siguientes herramientas:
ShowCrosshairs
: un IgxToolActionCheckboxComponent
que alterna las anotaciones en forma de cruz al pasar el mouse a través de la propiedad crosshairsDisplayMode
del gráfico.
ShowGridlines
: un IgxToolActionCheckboxComponent
que alterna líneas de cuadrícula adicionales aplicando un MajorStroke
al eje X.
Acción Guardar en imagen
CopyAsImage
: A IgxToolActionLabelComponent
que expone una opción para copiar el gráfico en el portapapeles.
CopyHeader
: Un encabezado de subsección.
Iconos SVG
Al agregar herramientas manualmente, los iconos se pueden asignar mediante el RenderIconFromText
método. Hay tres parámetros que se deben pasar en este método. El primero es el nombre de la colección de iconos definido en la herramienta, por ejemplo. iconCollectionName
El segundo es el nombre del icono definido en la herramienta, por ejemplo iconName
, seguido de la adición de la cadena 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
Orientación vertical
De forma predeterminada, la barra de herramientas Angular se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente configurando la propiedad orientation
.
<igx-toolbar orientation ="Vertical" />
html
El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas 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 } 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 コピー
Color Editor
Puede agregar una herramienta de editor de color personalizada a la barra de herramientas Angular, que también funcionará con el evento Command para realizar un estilo personalizado en la aplicación.
<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
En el ejemplo siguiente se muestra el estilo del pincel de la serie Angular Gráfico de datos con la herramienta Editor de color.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 コピー
Referencias de API
Recursos adicionales