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.
[!Note] the following examples can be applied to
IgrCategoryChartas well asIgrFinancialChartcontrols.
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.
React Axis Gridlines Example
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:
React Axis Gridlines Properties
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.
In order to display minor gridlines that correspond to minor interval, you need to set xAxisMinorStroke and xAxisMinorStrokeThickness properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.
Puede personalizar la forma en que se muestran las líneas de cuadrícula en el gráfico de React estableciendo las siguientes propiedades:
| Imágenes del eje | Tipo | Nombres de propiedades | Descripción |
|---|---|---|---|
| Color de trazo principal | cadena | xAxisMajorStroke yAxisMajorStroke |
Estas propiedades establecen el color de las líneas de cuadrícula del eje principal. |
| Color de trazo menor | cadena | xAxisMinorStroke yAxisMinorStroke |
Estas propiedades establecen el color de las líneas de cuadrícula del eje menor. |
| Grosor del trazo mayor | número | xAxisMajorStrokeThickness yAxisMajorStrokeThickness |
Estas propiedades establecen el grosor en píxeles de las líneas de cuadrícula del eje principal. |
| Grosor del trazo menor | número | xAxisMinorStrokeThickness yAxisMinorStrokeThickness |
Estas propiedades establecen el grosor en píxeles de las líneas de cuadrícula del eje menor. |
| Intervalo mayor | número | xAxisInterval yAxisInterval |
Estas propiedades establecen el intervalo entre las líneas de cuadrícula y las etiquetas del eje principal. |
| Intervalo menor | número | xAxisMinorInterval yAxisMinorInterval |
Estas propiedades establecen el intervalo entre las líneas de cuadrícula menores del eje, si se utilizan. |
| Color del trazo de la línea del eje | cadena | xAxisStroke yAxisStroke |
Estas propiedades establecen el color de una línea de eje. |
| Grosor del trazo del eje | número | xAxisStrokeThickness yAxisStrokeThickness |
Estas propiedades establecen el grosor en píxeles de una línea de eje. |
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:
The axes of the IgrDataChart also have the ability to place a dash array on the major and minor gridlines by utilizing the majorStrokeDashArray and minorStrokeDashArray properties, respectively. The actual axis line can be dashed as well by setting the strokeDashArray property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.
The following example demonstrates a IgrDataChart with the above dash array properties set:
React Axis Tickmarks Example
Axis tick marks are enabled by setting the xAxisTickLength and yAxisTickLength properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the yAxisTickLength property is set to 5, axis labels will be shifted left by that amount.
El siguiente ejemplo demuestra cómo personalizar las marcas configurando las propiedades anteriores:
React Axis Tickmarks Properties
Puede personalizar la forma en que se muestran las marcas de graduación del eje en nuestros chats de React configurando las siguientes propiedades:
| Imágenes del eje | Tipo | Nombres de propiedades | Descripción |
|---|---|---|---|
| Color de trazo de marca | cadena | xAxisTickStroke yAxisTickStroke |
Estas propiedades establecen el color de las marcas. |
| Grosor del trazo de garrapata | número | xAxisTickStrokeThickness yAxisTickStrokeThickness |
Estas propiedades establecen el grosor de las marcas de los ejes. |
| Longitud del trazo de garrapata | número | xAxisTickLength yAxisTickLength |
Estas propiedades establecen la longitud de las marcas de graduación del eje. |
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: