Opciones de React eje
En todos los gráficos Ignite UI for React, los ejes proporcionan propiedades para configuraciones visuales como títulos, etiquetas y rangos. Estas características se muestran en los ejemplos que se proporcionan a continuación.
Axis Titles Example
La función de títulos de los ejes de los gráficos de React le permite agregar información contextual a su gráfico. Puede personalizar el aspecto de los títulos de los ejes de muchas maneras diferentes, como la aplicación de diferentes estilos de fuente, colores, márgenes y alineaciones.
Axis Labels Example
El React Gráficos le permite un control total sobre la configuración, el formato y el estilo de la fuente de las etiquetas que se muestran en un eje del gráfico. Puede cambiar el ángulo de rotación, el margen, la alineación horizontal y vertical, el color, el relleno y la visibilidad de las etiquetas de los ejes. En el ejemplo siguiente se muestra cómo utilizar estas características de los ejes.
Axis Labels Management & Formatting
Los ejes del gráfico tienen la capacidad de realizar un cálculo mejorado con respecto a la cantidad de espacio disponible para las etiquetas del eje propietario. Este cálculo mejorado permite que el eje optimice la cantidad de espacio que se le asigna para mostrar más etiquetas para el eje dado.
Este cálculo mejorado es algo a lo que debes optar por acceder, lo cual puedes hacer configurando lauseEnhancedIntervalManagement propiedad como verdadera. Luego, si prefieres mostrar tantas etiquetas como puedas en las dimensiones del eje sin tener que ajustar manualmente lainterval propiedad, puedes poner laenhancedIntervalPreferMoreCategoryLabels propiedad en el eje como verdadera.
El gráfico también tiene la capacidad de considerar la rotación automática de las etiquetas si no encajan en el espacio asignado, así como la posibilidad de aplicar un margen automático al área del gráfico para asegurar que las etiquetas encajeran. Esto es algo que se puede optar inicialmente estableciendo primero laautoMarginAndAngleUpdateMode propiedad en la carta como una o otraSizeChanging cosaSizeChangingAndZoom. Esto indicará al gráfico cuándo reevaluar el margen automático y el ángulo aplicado a las etiquetas, si así lo desea.
Después de configurar laautoMarginAndAngleUpdateMode propiedad, puedes ponershouldAutoExpandMarginForInitialLabels la propiedad en verdadero para optar por el margen automático o ponershouldConsiderAutoRotationForInitialLabels la propiedad en verdadero para la rotación automática. También puedes personalizar aún más el margen automático que se aplica configurando yautoExpandMarginExtraPaddingautoExpandMarginMaximumValue para proporcionar espacio extra o un margen máximo posible, respectivamente.
Formatos personalizados de etiquetas comoIgrNumberFormatSpecifier yIgrDateTimeFormatSpecifier pueden añadirse a cada eje a través de lasXAxisLabelFormatSpecifier colecciones y.YAxisLabelFormatSpecifier Comúnmente utilizado para aplicar el formato sensible de números, fechas y horas de los idiomas Intl.NumberFormat e Intl.DateTimeFormat. Para que se aplique un formato personalizado a las etiquetas, elyAxisLabelFormat oxAxisLabelFormat debe configurarse como el nombre de propiedad del elemento de datos en elIgrCategoryChart, por{Date} ejemplo, Para elIgrFinancialChart número es el contexto porque utiliza un eje numérico, por lo tanto esto debe establecerse en{0}.
El siguiente ejemplo formatea el yAxis con unIgrNumberFormatSpecifier para representar los precios $USD de las películas más destacadas en taquilla en Estados Unidos.
Axis Range Example
In the React charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the yAxisMinimumValue and yAxisMaximumValue options.
Por defecto, los gráficos calcularán los valores mínimos y máximos para el rango numérico y de los ejes temporales basándose en los puntos de valor más bajo y mayor correspondientes en tus datos, pero este cálculo automático puede no ser apropiado para tu conjunto de datos en todos los casos. Por ejemplo, si tus datos tienen un valor mínimo de 850, quizá quieras fijar elyAxisMinimumValue en 800 para que haya un valor de espacio de 50 entre el mínimo del eje y el valor más bajo de los puntos de datos. La misma idea puede aplicarse al valor mínimo del eje y al valor más alto de los puntos de datos usando layAxisMaximumValue propiedad.
Axis Modes & Scale
En losIgrFinancialChart controles yIgrCategoryChart puedes elegir si tus datos se representan en escala logarítmica a lo largo del eje y cuando layAxisIsLogarithmic propiedad está en verdadero o en escala lineal cuando esta propiedad está en falso (valor por defecto). Con estayAxisLogarithmBase propiedad, puedes cambiar la base de la escala logarítmica desde el valor por defecto de 10 a otro valor entero.
ElIgrFinancialChart control and te permite elegir cómo se representan tus datos a lo largo del eje y usandoyAxisMode la propiedad que proporcionaNumeric modos yPercentChange. ElNumeric modo grafica los datos con los valores exactos, mientras quePercentChange el modo muestra los datos como un cambio porcentual respecto al primer punto de datos proporcionado. El valor por defecto esNumeric modo.
Además de layAxisMode propiedad, elIgrFinancialChart control tienexAxisMode una propiedad que proporcionaTime modosOrdinal y para el eje x. ElTime modo renderizará espacio a lo largo del eje x para huecos en los datos (por ejemplo, no se puede negociar acciones los fines de semana o festivos). ElOrdinal modo colapsará las fechas de las áreas donde no existen datos. El valor por defecto esOrdinal modo.
Axis Gap Example
The xAxisGap property of the React charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
The xAxisMaximumGap property of the React charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set xAxisGap to.
The xAxisMinimumGapSize property of the React charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
El siguiente ejemplo muestra la temperatura máxima media en Celsius en Central Park de Nueva York representada por un Gráfico de columnas con unxAxisGap inicialmente fijado en 1, por lo que habrá un ancho completo de categoría entre las columnas. Hay un deslizador que te permite configurar el hueco en este ejemplo para que puedas ver qué hacen los diferentes valores.
Axis Overlap Example
The xAxisOverlap property of the React charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
El siguiente ejemplo muestra una comparación de las franquicias cinematográficas más taquilleras del mundo en comparación con los ingresos totales de taquilla mundial de la franquicia y la película más taquillera de la serie, representada por un Gráfico de columnas con unxAxisOverlap inicial fijado en 1, por lo que las columnas se solaparán completamente. Hay un control deslizante que te permite configurar la superposición en este ejemplo para que puedas ver qué hacen los diferentes valores.
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: