El componente React barra de herramientas es un contenedor complementario para las operaciones de la interfaz de usuario que se usará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramienta cuando se vincule a nuestros IgrDataChart
componentes o IgrCategoryChart
. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales proporcionar cambios, ofreciendo una cantidad infinita de personalización.
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 React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrLegendModule, IgrCategoryChartModule, IgrCategoryChartToolbarModule } from "@infragistics/igniteui-react-charts" ;
import { IgrToolbarModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts" ;
import { IgrToolbar } from "@infragistics/igniteui-react-layouts" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
const mods : any [] = [
IgrLegendModule,
IgrToolbarModule,
IgrCategoryChartModule,
IgrCategoryChartToolbarModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this .legend = r;
this .setState({});
}
private toolbar: IgrToolbar
private toolbarRef(r: IgrToolbar) {
this .toolbar = r;
this .setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this .chart = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .legendRef = this .legendRef.bind(this );
this .toolbarRef = this .toolbarRef.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="legend-title" >
Renewable Electricity Generated
</div >
<div className ="aboveContentSplit" >
<div className ="aboveContentLeftContainer" >
<div >
<IgrToolbar
ref ={this.toolbarRef}
target ={this.chart}
orientation ="Horizontal" >
</IgrToolbar >
</div >
</div >
<div className ="aboveContentRightContainer" >
<div >
<IgrLegend
ref ={this.legendRef}
orientation ="Horizontal" >
</IgrLegend >
</div >
</div >
</div >
<div className ="container fill" >
<IgrCategoryChart
ref ={this.chartRef}
chartType ="Line"
isHorizontalZoomEnabled ="true"
isVerticalZoomEnabled ="true"
dataSource ={this.countryRenewableElectricity}
includedProperties ={[ "year ", "europe ", "china ", "america "]}
legend ={this.legend}
yAxisTitle ="TWh"
yAxisTitleLeftMargin ="10"
yAxisTitleRightMargin ="5"
yAxisLabelLeftMargin ="0"
yAxisLabelLocation ="OutsideRight"
isTransitionInEnabled ="true" >
</IgrCategoryChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
.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;
}
css コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
Instale los Ignite UI for React diseños, entradas, gráficos y paquetes principales:
npm install igniteui-react-layouts
npm install igniteui-react-inputs
npm install igniteui-react-charts
npm install igniteui-react-core
cmd
Los siguientes módulos son necesarios cuando se utiliza el IgrToolbar
IgrDataChart
componente y sus características.
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
A continuación se muestra una lista de los diferentes IgrToolAction
elementos 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 utilizando las overlayId
propiedades y beforeId
afterId
del IgrToolAction
objeto. ToolActions también expone una visibility
propiedad.
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 .
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 React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrToolbarModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from "@infragistics/igniteui-react-charts" ;
import { IgrToolbar, IgrToolActionCheckbox, IgrToolActionLabel, IgrToolActionIconMenu } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries } from "@infragistics/igniteui-react-charts" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgrToolCommandEventArgs } from "@infragistics/igniteui-react-layouts" ;
import { IgrSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts" ;
const mods : any [] = [
IgrToolbarModule,
IgrDataChartToolbarModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartAnnotationModule,
IgrDataChartInteractivityModule,
IgrDataChartCategoryTrendLineModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private toolbar: IgrToolbar
private toolbarRef(r: IgrToolbar) {
this .toolbar = r;
this .setState({});
}
private enableTooltipsLabel: IgrToolActionCheckbox
private zoomResetHidden: IgrToolActionLabel
private zoomResetLabel: IgrToolActionLabel
private analyzeMenu: IgrToolActionIconMenu
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this .chart = r;
this .setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private lineSeries1: IgrLineSeries
private lineSeries2: IgrLineSeries
private lineSeries3: IgrLineSeries
constructor (props: any ) {
super (props);
this .toolbarRef = this .toolbarRef.bind(this );
this .toolbarToggleTooltip = this .toolbarToggleTooltip.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="aboveContentSplit" >
<div className ="aboveContentLeftContainer" >
<div >
<IgrToolbar
ref ={this.toolbarRef}
target ={this.chart}
orientation ="Horizontal"
onCommand ={this.toolbarToggleTooltip} >
<IgrToolActionCheckbox
name ="EnableTooltipsLabel"
title ="Enable Tooltips"
beforeId ="ZoomReset"
commandId ="EnableTooltips" >
</IgrToolActionCheckbox >
<IgrToolActionLabel
name ="zoomResetHidden"
overlayId ="ZoomReset"
visibility ="Collapsed" >
</IgrToolActionLabel >
<IgrToolActionLabel
name ="zoomResetLabel"
title ="Reset"
afterId ="ZoomOut"
iconName ="reset"
iconCollectionName ="ChartToolbarIcons"
commandId ="ZoomReset" >
</IgrToolActionLabel >
<IgrToolActionIconMenu
name ="AnalyzeMenu"
overlayId ="AnalyzeMenu"
visibility ="Collapsed" >
</IgrToolActionIconMenu >
</IgrToolbar >
</div >
</div >
</div >
<div className ="container fill" >
<IgrDataChart
computedPlotAreaMarginMode ="Series"
isHorizontalZoomEnabled ="true"
isVerticalZoomEnabled ="true"
ref ={this.chartRef} >
<IgrCategoryXAxis
name ="xAxis"
dataSource ={this.countryRenewableElectricity}
label ="year" >
</IgrCategoryXAxis >
<IgrNumericYAxis
name ="yAxis"
title ="TWh"
labelLocation ="OutsideRight" >
</IgrNumericYAxis >
<IgrLineSeries
name ="lineSeries1"
title ="Electricity"
xAxisName ="xAxis"
yAxisName ="yAxis"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="america" >
</IgrLineSeries >
<IgrLineSeries
name ="LineSeries2"
title ="Electricity"
xAxisName ="xAxis"
yAxisName ="yAxis"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="europe" >
</IgrLineSeries >
<IgrLineSeries
name ="LineSeries3"
title ="Electricity"
xAxisName ="xAxis"
yAxisName ="yAxis"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="china" >
</IgrLineSeries >
</IgrDataChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public toolbarToggleTooltip(sender: any , args: IgrToolCommandEventArgs): 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 IgrDataToolTipLayer({ name: "tooltipLayer" }));
}
else
{
var toRemove = null ;
for (var i = 0 ; i < target.actualSeries.length; i++) {
let s = target.actualSeries[i] as IgrSeries;
if (s instanceof IgrDataToolTipLayer)
{
toRemove = s;
}
}
if (toRemove != null)
{
target.series.remove(toRemove);
}
}
break;
}
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <Sample /> );
tsx コピー
.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;
}
css コピー
Integración React Gráfico de datos
La barra de herramientas React contiene una Target
propiedad. Esto se utiliza para vincular un componente, como se IgrDataChart
muestra en el código a continuación:
private toolbar: IgrToolbar
private toolbarRef(r: IgrToolbar) {
this .toolbar = r;
this .setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this .chart = r;
this .toolbar.target = this .chart;
this .setState({});
}
public render (): JSX .Element {
return (
<div >
<IgrToolbar
ref ={this.toolbarRef} >
</IgrToolbar >
</div >
<div >
<IgrDataChart
ref ={this.chartRef} >
</IgrDataChart >
</div >
);
}
tsx
Varios elementos y menús preexistentes IgrToolAction
están disponibles cuando se IgrDataChart
vincula con la barra de herramientas. A continuación, se muestra una lista de las acciones de herramienta React IgrDataChart
integradas y sus asociadas overlayId
:
Acciones de zoom
Acciones de tendencia
AnalyzeMenu
: A IgrToolActionIconMenu
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:
MaxValue
: A IgrToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
MinValue
: A IgrToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
Average
: A IgrToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor medio de la serie.
TrendsMenu
: Un submenú que contiene herramientas para aplicar varias líneas de tendencia al área de trazado IgrDataChart
.
TrendsHeader
: encabezado de sección de submenú para las siguientes tres herramientas:
HelpersHeader
: encabezado de una subsección.
SeriesAvg
: A IgrToolActionCheckbox
que agrega o quita a a a IgrValueLayer
la colección de series del gráfico mediante el ValueLayerValueMode
tipo Average
of.
ValueLabelsMenu
: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en el IgrDataChart
área de la trama.
ValueLabelsHeader
: encabezado de sección del submenú para las siguientes herramientas:
ShowCrosshairs
: A IgrToolActionCheckbox
que alterna las anotaciones en forma de cruz al pasar el ratón por encima a través de la propiedad del crosshairsDisplayMode
gráfico.
ShowGridlines
: A IgrToolActionCheckbox
que alterna líneas de cuadrícula adicionales aplicando a MajorStroke
al eje X.
Acción Guardar en imagen
CopyAsImage
: A IgrToolActionLabel
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.
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
<IgrToolbar orientation ="Vertical" />
tsx
Orientación vertical
De forma predeterminada, la barra de herramientas React se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente estableciendo la orientation
propiedad.
<IgrToolbar orientation ="Vertical" />
tsx
El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas React.
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 React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrToolbarModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrAnnotationLayerProxyModule, IgrDataChartCategoryTrendLineModule } from "@infragistics/igniteui-react-charts" ;
import { IgrToolbar } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries } from "@infragistics/igniteui-react-charts" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
const mods : any [] = [
IgrToolbarModule,
IgrDataChartToolbarModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartAnnotationModule,
IgrDataChartInteractivityModule,
IgrAnnotationLayerProxyModule,
IgrDataChartCategoryTrendLineModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private toolbar: IgrToolbar
private toolbarRef(r: IgrToolbar) {
this .toolbar = r;
this .setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this .chart = r;
this .setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private lineSeries1: IgrLineSeries
constructor (props: any ) {
super (props);
this .toolbarRef = this .toolbarRef.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="aboveContent" >
<IgrToolbar
ref ={this.toolbarRef}
target ={this.chart}
orientation ="Vertical" >
</IgrToolbar >
</div >
<div className ="container fill" >
<IgrDataChart
isHorizontalZoomEnabled ="true"
ref ={this.chartRef} >
<IgrCategoryXAxis
name ="xAxis"
dataSource ={this.countryRenewableElectricity}
label ="year" >
</IgrCategoryXAxis >
<IgrNumericYAxis
name ="yAxis"
title ="TWh"
labelLocation ="OutsideRight" >
</IgrNumericYAxis >
<IgrLineSeries
name ="lineSeries1"
title ="Electricity"
xAxisName ="xAxis"
yAxisName ="yAxis"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="america" >
</IgrLineSeries >
</IgrDataChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Color Editor
Puede agregar una herramienta de edición de color personalizada a la barra de herramientas React, que también funcionará con el evento Command para realizar un estilo personalizado en su aplicación.
<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
<IgrToolbar
ref ={this.toolbarRef}
target ={this.chart} >
<IgrToolActionColorEditor
title ="Series Brush Color"
name ="colorEditorTool" >
</IgrToolActionColorEditor >
</IgrToolbar >
tsx
En el ejemplo siguiente se muestra el estilo del pincel de la serie React Gráfico de datos con la herramienta Editor de color.
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 React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrToolbarModule, IgrToolActionComboModule, IgrToolActionColorEditorModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChartToolbarModule, IgrDataLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCategoryModule, IgrDataChartCoreModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts" ;
import { IgrToolbar, IgrToolActionColorEditor } from "@infragistics/igniteui-react-layouts" ;
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries } from "@infragistics/igniteui-react-charts" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgrToolCommandEventArgs } from "@infragistics/igniteui-react-layouts" ;
import { IgrSeries } from "@infragistics/igniteui-react-charts" ;
const mods : any [] = [
IgrToolbarModule,
IgrToolActionComboModule,
IgrToolActionColorEditorModule,
IgrDataChartToolbarModule,
IgrDataLegendModule,
IgrNumberAbbreviatorModule,
IgrDataChartCategoryModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartAnnotationModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private toolbar: IgrToolbar
private toolbarRef(r: IgrToolbar) {
this .toolbar = r;
this .setState({});
}
private colorEditorTool: IgrToolActionColorEditor
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this .chart = r;
this .setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private lineSeries1: IgrLineSeries
constructor (props: any ) {
super (props);
this .toolbarRef = this .toolbarRef.bind(this );
this .colorEditorToggleSeriesBrush = this .colorEditorToggleSeriesBrush.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="aboveContentSplit" >
<div className ="aboveContentLeftContainer" >
<div >
<IgrToolbar
ref ={this.toolbarRef}
target ={this.chart}
onCommand ={this.colorEditorToggleSeriesBrush} >
<IgrToolActionColorEditor
title ="Series Brush"
name ="colorEditorTool"
commandId ="ToggleSeriesBrush" >
</IgrToolActionColorEditor >
</IgrToolbar >
</div >
</div >
</div >
<div className ="container fill" >
<IgrDataChart
isHorizontalZoomEnabled ="true"
ref ={this.chartRef} >
<IgrCategoryXAxis
name ="xAxis"
dataSource ={this.countryRenewableElectricity}
label ="year" >
</IgrCategoryXAxis >
<IgrNumericYAxis
name ="yAxis"
title ="TWh"
labelLocation ="OutsideRight" >
</IgrNumericYAxis >
<IgrLineSeries
name ="lineSeries1"
title ="Electricity"
xAxisName ="xAxis"
yAxisName ="yAxis"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="america"
markerType ="None" >
</IgrLineSeries >
</IgrDataChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public colorEditorToggleSeriesBrush(sender: any , args: IgrToolCommandEventArgs): void {
var target = this .chart;
switch (args.command.commandId)
{
case "ToggleSeriesBrush" :
var color = args.command.argumentsList[0 ].value
var series = target.contentSeries[0 ] as IgrSeries;
series.brush = color as any ;
break ;
}
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
.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;
}
css コピー
Referencias de API
Recursos adicionales