Líneas de cuadrícula React Axis
Todos los gráficos Ignite UI for React incluyen la capacidad incorporada de modificar la apariencia de las líneas de los ejes, así como la frecuencia de las líneas de cuadrícula principales/secundarias y las marcas de graduación que se representan en los ejes X y Y.
Los siguientes ejemplos se pueden aplicar a IgrCategoryChart así como a los controles IgrFinancialChart.
Las líneas de cuadrícula del eje principal son líneas largas que se extienden horizontalmente a lo largo del eje Y o verticalmente a lo largo del eje X desde las ubicaciones de las etiquetas de los ejes y se representan en el área de trazado del gráfico. Las líneas de cuadrícula del eje menor son líneas que se representan entre las líneas de cuadrícula del eje mayor.
Las marcas de graduación de los ejes se muestran a lo largo de todos los ejes horizontales y verticales de cada etiqueta en todas las posiciones de línea principales del gráfico de React.
Ejemplo de líneas de cuadrícula de React ejes
Este ejemplo muestra cómo configurar la línea de cuadrícula del eje para mostrar líneas de cuadrícula mayores y menores en intervalos específicos:
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 { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts" ;
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrLegendModule,
IgrCategoryChartModule
];
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 propertyEditorPanel1: IgrPropertyEditorPanel
private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
this .propertyEditorPanel1 = r;
this .setState({});
}
private xAxisStroke: IgrPropertyEditorPropertyDescription
private xAxisMajorStroke: IgrPropertyEditorPropertyDescription
private yAxisStroke: IgrPropertyEditorPropertyDescription
private yAxisMajorStroke: IgrPropertyEditorPropertyDescription
private yAxisMinorStroke: IgrPropertyEditorPropertyDescription
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this .chart = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .legendRef = this .legendRef.bind(this );
this .propertyEditorPanel1Ref = this .propertyEditorPanel1Ref.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
componentRenderer ={this.renderer}
target ={this.chart}
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
ref ={this.propertyEditorPanel1Ref} >
<IgrPropertyEditorPropertyDescription
propertyPath ="XAxisStroke"
name ="XAxisStroke"
label ="X Axis Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="XAxisMajorStroke"
name ="XAxisMajorStroke"
label ="X Axis Major Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="darkslategray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisStroke"
name ="YAxisStroke"
label ="Y Axis Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisMajorStroke"
name ="YAxisMajorStroke"
label ="Y Axis Major Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="darkslategray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisMinorStroke"
name ="YAxisMinorStroke"
label ="Y Axis Minor Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="legend-title" >
Renewable Electricity Generated
</div >
<div className ="legend" >
<IgrLegend
ref ={this.legendRef}
orientation ="Horizontal" >
</IgrLegend >
</div >
<div className ="container fill" >
<IgrCategoryChart
ref ={this.chartRef}
computedPlotAreaMarginMode ="Series"
dataSource ={this.countryRenewableElectricity}
includedProperties ={[ "year ", "europe ", "china ", "america "]}
chartType ="Line"
legend ={this.legend}
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
xAxisStroke ="rgba(145, 145, 145, 1)"
xAxisStrokeThickness ="2"
xAxisInterval ="1"
xAxisMajorStroke ="rgba(71, 71, 71, 1)"
xAxisMajorStrokeThickness ="0.5"
yAxisStroke ="gray"
yAxisStrokeThickness ="2"
yAxisInterval ="20"
yAxisMajorStroke ="darkslategray"
yAxisMajorStrokeThickness ="1"
yAxisMinorInterval ="5"
yAxisMinorStroke ="gray"
yAxisMinorStrokeThickness ="0.5"
thickness ="2" >
</IgrCategoryChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
¿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.
Propiedades de las líneas de cuadrícula del eje React
Establecer la propiedad de intervalo de eje especifica con qué frecuencia se representan las principales líneas de cuadrícula y etiquetas de eje en un eje. De manera similar, la propiedad de intervalo menor del eje especifica con qué frecuencia se representan las líneas de cuadrícula menores en un eje.
Para mostrar líneas de cuadrícula menores que corresponden a intervalos menores, debe configurar las propiedades xAxisMinorStroke
y xAxisMinorStrokeThickness
en el eje. Esto se debe a que las líneas de cuadrícula menores no tienen un color o grosor predeterminado y no se mostrarán sin asignarlas primero.
Puede personalizar la forma en que se muestran las líneas de cuadrícula en el gráfico de React estableciendo las siguientes propiedades:
Con respecto al intervalo mayor y menor en la tabla anterior, es importante tener en cuenta que el intervalo mayor para las etiquetas de los ejes también se establecerá según este valor, mostrando una etiqueta en el punto del eje asociado con el intervalo. Las líneas de la cuadrícula del intervalo menor siempre se representan entre las líneas de la cuadrícula principal y, como tal, las propiedades del intervalo menor siempre deben establecerse en algo mucho más pequeño (generalmente entre 2 y 5 veces más pequeño) que el valor de las propiedades del intervalo mayor.
En los ejes de categorías, los intervalos se representan como un índice entre el primer elemento y el último elemento de categoría. Generalmente, este valor debe ser igual al 10-20% del número total de elementos de categoría para el intervalo principal, de modo que todas las etiquetas de los ejes encajen en el eje y no queden recortadas por otras etiquetas de ejes. Para intervalos menores, esto se representa como una fracción de las propiedades del intervalo mayor. Este valor generalmente debe estar entre 0,25 y 0,5.
En los ejes numéricos, los valores del intervalo se representan como un doble entre el valor mínimo del eje y el valor máximo del eje. De forma predeterminada, los ejes numéricos calcularán automáticamente y encontrarán un intervalo agradable y redondo basado en los valores mínimos y máximos del eje.
En los ejes de fecha y hora, este valor se representa como un lapso de tiempo entre el valor mínimo del eje y el valor máximo del eje.
El siguiente ejemplo demuestra cómo personalizar las líneas de la cuadrícula configurando las propiedades anteriores:
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 { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts" ;
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrLegendModule,
IgrCategoryChartModule
];
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 propertyEditorPanel1: IgrPropertyEditorPanel
private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
this .propertyEditorPanel1 = r;
this .setState({});
}
private xAxisStroke: IgrPropertyEditorPropertyDescription
private xAxisMajorStroke: IgrPropertyEditorPropertyDescription
private yAxisStroke: IgrPropertyEditorPropertyDescription
private yAxisMajorStroke: IgrPropertyEditorPropertyDescription
private yAxisMinorStroke: IgrPropertyEditorPropertyDescription
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this .chart = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .legendRef = this .legendRef.bind(this );
this .propertyEditorPanel1Ref = this .propertyEditorPanel1Ref.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
componentRenderer ={this.renderer}
target ={this.chart}
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
ref ={this.propertyEditorPanel1Ref} >
<IgrPropertyEditorPropertyDescription
propertyPath ="XAxisStroke"
name ="XAxisStroke"
label ="X Axis Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="XAxisMajorStroke"
name ="XAxisMajorStroke"
label ="X Axis Major Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="darkslategray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisStroke"
name ="YAxisStroke"
label ="Y Axis Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisMajorStroke"
name ="YAxisMajorStroke"
label ="Y Axis Major Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="darkslategray" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
propertyPath ="YAxisMinorStroke"
name ="YAxisMinorStroke"
label ="Y Axis Minor Stroke"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
dropDownValues ={[ "gray ", "darkslategray ", "salmon ", "cornflowerblue ", "darkgreen "]}
primitiveValue ="gray" >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="legend-title" >
Renewable Electricity Generated
</div >
<div className ="legend" >
<IgrLegend
ref ={this.legendRef}
orientation ="Horizontal" >
</IgrLegend >
</div >
<div className ="container fill" >
<IgrCategoryChart
ref ={this.chartRef}
computedPlotAreaMarginMode ="Series"
dataSource ={this.countryRenewableElectricity}
includedProperties ={[ "year ", "europe ", "china ", "america "]}
chartType ="Line"
legend ={this.legend}
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
xAxisStroke ="rgba(145, 145, 145, 1)"
xAxisStrokeThickness ="2"
xAxisInterval ="1"
xAxisMajorStroke ="rgba(71, 71, 71, 1)"
xAxisMajorStrokeThickness ="0.5"
yAxisStroke ="gray"
yAxisStrokeThickness ="2"
yAxisInterval ="20"
yAxisMajorStroke ="darkslategray"
yAxisMajorStrokeThickness ="1"
yAxisMinorInterval ="5"
yAxisMinorStroke ="gray"
yAxisMinorStrokeThickness ="0.5"
thickness ="2" >
</IgrCategoryChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Los ejes de IgrDataChart
también tienen la capacidad de colocar una matriz de guiones en las líneas de cuadrícula mayor y menor utilizando las propiedades majorStrokeDashArray
y minorStrokeDashArray
, respectivamente. La línea del eje real también puede ser discontinua configurando la propiedad strokeDashArray
del eje correspondiente. Estas propiedades toman una serie de números que describirán la longitud de los guiones de las líneas de cuadrícula correspondientes.
El siguiente ejemplo demuestra un IgrDataChart
con las propiedades de matriz de guiones establecidas anteriormente:
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 , items)));
}
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrLegendModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts" ;
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries } from "@infragistics/igniteui-react-charts" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
const mods : any [] = [
IgrLegendModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule
];
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 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 .legendRef = this .legendRef.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 ="legend" >
<IgrLegend
ref ={this.legendRef}
orientation ="Horizontal" >
</IgrLegend >
</div >
<div className ="container fill" >
<IgrDataChart
ref ={this.chartRef}
legend ={this.legend}
computedPlotAreaMarginMode ="Series" >
<IgrCategoryXAxis
name ="xAxis"
dataSource ={this.countryRenewableElectricity}
label ="year"
interval ="1"
majorStroke ="rgba(71, 71, 71, 1)"
majorStrokeThickness ="0.5"
stroke ="rgba(145, 145, 145, 1)"
strokeThickness ="2"
strokeDashArray ="5, 5"
majorStrokeDashArray ="5, 5"
tickLength ="0" >
</IgrCategoryXAxis >
<IgrNumericYAxis
name ="yAxis"
stroke ="gray"
strokeThickness ="2"
interval ="20"
majorStroke ="darkslategray"
majorStrokeThickness ="1"
minorInterval ="5"
minorStroke ="gray"
minorStrokeThickness ="0.5"
strokeDashArray ="5, 5"
majorStrokeDashArray ="5, 5"
minorStrokeDashArray ="2.5, 2.5"
tickLength ="0" >
</IgrNumericYAxis >
<IgrLineSeries
name ="LineSeries1"
title ="Europe"
xAxisName ="xAxis"
yAxisName ="yAxis"
markerType ="Circle"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="europe"
showDefaultTooltip ="true" >
</IgrLineSeries >
<IgrLineSeries
name ="LineSeries2"
title ="China"
xAxisName ="xAxis"
yAxisName ="yAxis"
markerType ="Circle"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="china"
showDefaultTooltip ="true" >
</IgrLineSeries >
<IgrLineSeries
name ="LineSeries3"
title ="America"
xAxisName ="xAxis"
yAxisName ="yAxis"
markerType ="Circle"
dataSource ={this.countryRenewableElectricity}
valueMemberPath ="america"
showDefaultTooltip ="true" >
</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 コピー
Ejemplo de marcas de React eje
Las marcas de graduación del eje se habilitan estableciendo las propiedades xAxisTickLength
y yAxisTickLength
en un valor mayor que 0. Estas propiedades especifican la longitud de los segmentos de línea que forman las marcas de graduación.
Las marcas de graduación siempre se extienden desde la línea del eje y apuntan a la dirección de las etiquetas. Las etiquetas están compensadas por el valor de la longitud de las marcas para evitar superposiciones. Por ejemplo, con la propiedad yAxisTickLength
establecida en 5, las etiquetas de los ejes se desplazarán hacia la izquierda en esa cantidad.
El siguiente ejemplo demuestra cómo personalizar las marcas configurando las propiedades anteriores:
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 { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts" ;
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrLegendModule,
IgrCategoryChartModule
];
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 propertyEditorPanel1: IgrPropertyEditorPanel
private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
this .propertyEditorPanel1 = r;
this .setState({});
}
private xAxisTickLength: IgrPropertyEditorPropertyDescription
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this .chart = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .legendRef = this .legendRef.bind(this );
this .propertyEditorPanel1Ref = this .propertyEditorPanel1Ref.bind(this );
this .chartRef = this .chartRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
componentRenderer ={this.renderer}
target ={this.chart}
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
ref ={this.propertyEditorPanel1Ref} >
<IgrPropertyEditorPropertyDescription
propertyPath ="XAxisTickLength"
name ="XAxisTickLength"
label ="X Axis Tick Length"
shouldOverrideDefaultEditor ="true"
valueType ="Slider"
min ="0"
max ="20"
primitiveValue ="10" >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="legend-title" >
Renewable Electricity Generated
</div >
<div className ="legend" >
<IgrLegend
ref ={this.legendRef}
orientation ="Horizontal" >
</IgrLegend >
</div >
<div className ="container fill" >
<IgrCategoryChart
ref ={this.chartRef}
dataSource ={this.countryRenewableElectricity}
includedProperties ={[ "year ", "europe ", "china ", "america "]}
legend ={this.legend}
chartType ="Line"
computedPlotAreaMarginMode ="Series"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
xAxisTickLength ="10"
xAxisTickStrokeThickness ="1"
xAxisTickStroke ="gray"
yAxisTickLength ="0"
yAxisTickStrokeThickness ="0"
yAxisTickStroke ="rgba(0, 0, 0, 0)" >
</IgrCategoryChart >
</div >
</div >
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Propiedades de las marcas de graduación del eje React
Puede personalizar la forma en que se muestran las marcas de graduación del eje en nuestros chats de React configurando las siguientes propiedades:
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: