Opciones React del 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 demuestran en los ejemplos que se proporcionan a continuación.
Axis Titles Example
La función de títulos de ejes de los gráficos React le permite agregar información contextual a su gráfico. Puede personalizar la apariencia de los títulos de los ejes de muchas maneras diferentes, como aplicando diferentes estilos de fuente, colores, márgenes y alineaciones.
Axis Labels Example
React Charts le permite control total sobre la configuración, el formato y el estilo de la fuente de las etiquetas que se muestran en un eje de su 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. El siguiente ejemplo 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 que usted debe aceptar, lo cual puede hacer configurando la propiedad useEnhancedIntervalManagement en verdadero. Luego, si prefiere mostrar tantas etiquetas como puedan caber en las dimensiones del eje sin configurar manualmente la propiedad interval del eje, puede establecer la propiedad enhancedIntervalPreferMoreCategoryLabels en el eje en verdadero.
El gráfico también tiene la capacidad de considerar la rotación automática de las etiquetas si no caben en el espacio asignado, así como la capacidad de aplicar un margen automático al área del trazado para garantizar que las etiquetas puedan caber. Esto es algo que se puede optar inicialmente configurando primero la propiedad autoMarginAndAngleUpdateMode en el gráfico en SizeChanging o SizeChangingAndZoom. Esto le indicará al gráfico cuándo reevaluar el margen automático y el ángulo aplicado a las etiquetas, si lo desea.
Después de configurar autoMarginAndAngleUpdateMode, puede establecer la propiedad shouldAutoExpandMarginForInitialLabels en verdadero para optar por el margen automático o establecer la propiedad shouldConsiderAutoRotationForInitialLabels en verdadero para la rotación automática. También puede personalizar aún más el margen automático que se aplica configurando autoExpandMarginExtraPadding y autoExpandMarginMaximumValue para proporcionar espacio adicional o un margen máximo posible, respectivamente.
Los formatos de etiqueta personalizados, como IgrNumberFormatSpecifier y IgrDateTimeFormatSpecifier se pueden agregar a cada eje a través de las XAxisLabelFormatSpecifier colecciones y YAxisLabelFormatSpecifier. Se usa normalmente para aplicar el formato de número, fecha y hora confidencial del lenguaje Intl.NumberFormat e Intl.DateTimeFormat. Para que se aplique un formato personalizado a las etiquetas, el o xAxisLabelFormat debe establecerse en el yAxisLabelFormat nombre de la propiedad del elemento de datos en el IgrCategoryChart, por ejemplo. {Date} Para el IgrFinancialChart el número es el contexto porque utiliza un eje numérico, por lo tanto, debe establecerse en {0}.
El siguiente ejemplo formatea el eje y con un IgrNumberFormatSpecifier para representar los precios en dólares estadounidenses de las películas más taquilleras de los Estados Unidos.
Axis Range Example
En los gráficos React, puede definir un valor mínimo y máximo de rango de un eje numérico o de tiempo. El rango mínimo es el valor más bajo del eje y el rango máximo es el valor más alto del eje. Estos se configuran configurando las opciones yAxisMinimumValue y yAxisMaximumValue.
De forma predeterminada, los gráficos calcularán los valores mínimo y máximo para el rango del eje numérico y de tiempo en función de los puntos de valor correspondientes más bajo y más alto de sus datos, pero este cálculo automático puede no ser apropiado para su conjunto de puntos de datos en todos los casos. Por ejemplo, si sus datos tienen un valor mínimo de 850, es posible que desee establecer yAxisMinimumValue en 800 para que haya un valor de espacio de 50 entre el eje mínimo y el valor más bajo de los puntos de datos. La misma idea se puede aplicar al valor mínimo del eje y al valor más alto de los puntos de datos utilizando la propiedad yAxisMaximumValue.
Axis Modes & Scale
En los controles IgrFinancialChart e IgrCategoryChart, puede elegir si sus datos se trazan en escala logarítmica a lo largo del eje y cuando la propiedad yAxisIsLogarithmic está establecida en verdadero o en escala lineal cuando esta propiedad está establecida en falso (valor predeterminado). Con la propiedad yAxisLogarithmBase, puede cambiar la base de la escala logarítmica del valor predeterminado de 10 a otro valor entero.
El control y el IgrFinancialChart le permiten elegir cómo se representan sus datos a lo largo del eje y utilizando la propiedad yAxisMode que proporciona los modos Numeric y PercentChange. El modo Numeric trazará datos con los valores exactos, mientras que el modo PercentChange mostrará los datos como cambio porcentual en relación con el primer punto de datos proporcionado. El valor predeterminado es el modo Numeric.
Además de la propiedad yAxisMode, el control IgrFinancialChart tiene la propiedad xAxisMode que proporciona modos Time y Ordinal para el eje x. El modo Time mostrará espacio a lo largo del eje x para las lagunas en los datos (por ejemplo, no se negocian acciones los fines de semana o días festivos). El modo Ordinal colapsará las áreas de fechas donde no existen datos. El valor predeterminado es el modo Ordinal.
Axis Gap Example
La propiedad xAxisGap de los gráficos React determina la cantidad de espacio entre columnas o barras de la serie trazada. Esta propiedad acepta un valor numérico entre 0,0 y 1,0. El valor representa un ancho relativo del espacio entre el número disponible de píxeles entre las series. Establecer esta propiedad en 0 significaría que no hay ningún espacio entre las series, y establecerla en 1 representaría el espacio máximo disponible.
La propiedad xAxisMaximumGap de los gráficos React determina el valor de brecha máximo que se permitirá. Este valor predeterminado está establecido en 1.0, pero se puede cambiar dependiendo de cómo haya configurado xAxisGap.
La propiedad xAxisMinimumGapSize de los gráficos React determina la cantidad mínima de píxeles que se utilizarán para el espacio entre las categorías, si es posible.
El siguiente ejemplo muestra la temperatura máxima promedio en grados Celsius en el Central Park de la ciudad de Nueva York representada por un Gráfico de columnas con un xAxisGap inicialmente establecido en 1, por lo que habrá un ancho de categoría completo entre las columnas. Hay un control deslizante que le permite configurar el espacio en este ejemplo para que pueda ver qué hacen los diferentes valores.
Axis Overlap Example
La propiedad xAxisOverlap de los gráficos React permite establecer la superposición de las columnas o barras representadas de las series trazadas. Esta propiedad acepta un valor numérico entre -1,0 y 1,0. El valor representa una superposición relativa del número disponible de píxeles dedicados a cada serie. Establecer esta propiedad en un valor negativo (hasta -1,0) da como resultado que las categorías se alejen unas de otras, produciendo una brecha entre ellas. Por el contrario, establecer esta propiedad en un valor positivo (hasta 1,0) da como resultado que las categorías se superpongan entre sí. Un valor de 1 indica que el gráfico muestre las categorías una encima de la otra.
El siguiente ejemplo muestra una comparación de las franquicias cinematográficas más taquilleras a nivel mundial comparadas con los ingresos totales de taquilla mundial de la franquicia y la película más taquillera de la serie, representadas por un Gráfico de columnas con un xAxisOverlap inicialmente establecido en 1, por lo que las columnas se superpondrán completamente entre sí. Hay un control deslizante que le permite configurar la superposición en este ejemplo para que pueda 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: