Opciones de eje Angular
En todos los gráficos Ignite UI for Angular, 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 Angular 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 Angular 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 comoIgxNumberFormatSpecifier yIgxDateTimeFormatSpecifier 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 elIgxCategoryChartComponent, por{Date} ejemplo, Para elIgxFinancialChartComponent 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 unIgxNumberFormatSpecifier para representar los precios $USD de las películas más destacadas en taquilla en Estados Unidos.
Axis Range Example
En los gráficos de Angular, puedes definir un valor mínimo de rango y un valor máximo de rango de un eje numérico o de tiempo. El mínimo de alcance es el valor más bajo del eje y el máximo de alcance es el valor más alto del eje. Estas se establecen configurando lasyAxisMinimumValue opciones y (yyAxisMaximumValue).
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 losIgxFinancialChartComponent controles yIgxCategoryChartComponent 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.
ElIgxFinancialChartComponent 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, elIgxFinancialChartComponent 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
LaxAxisGap propiedad de los gráficos de Angular determina la cantidad de espacio entre columnas o barras de series trazadas. Esta propiedad acepta un valor numérico entre 0,0 y 1,0. El valor representa un ancho relativo del espacio a partir del número de píxeles disponibles entre la serie. Poner esta propiedad en 0 significaría que no hay espacio renderizado entre la serie, y ponerlo en 1 renderizaría el espacio máximo disponible.
LaxAxisMaximumGap propiedad de los gráficos de Angular determina el valor máximo de la brecha a permitir. Este valor por defecto está en 1.0, pero se puede cambiar según lo que se pongaxAxisGap.
LaxAxisMinimumGapSize propiedad de los gráficos de Angular determina la cantidad mínima de píxeles a usar para el espacio entre las categorías, si es posible.
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
LaxAxisOverlap propiedad de los gráficos de Angular permite establecer la superposición de las columnas o barras renderizadas de las series trazadas. Esta propiedad acepta un valor numérico entre -1.0 y 1.0. El valor representa una superposición relativa respecto al número disponible de píxeles dedicados a cada serie. Establecer esta propiedad en un valor negativo (hasta -1,0) hace que las categorías se separen entre sí, creando un hueco entre ellas. Por el contrario, establecer esta propiedad a un valor positivo (hasta 1.0) hace que las categorías se superponan. Un valor de 1 indica que la tabla represente las categorías una encima de la otra.
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:
GitHub