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.

    Ejemplo de títulos de eje

    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.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Ejemplo de etiquetas de eje

    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.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Gestión y formateo de etiquetas de Axis

    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 IgxNumberFormatSpecifier y IgxDateTimeFormatSpecifier 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 IgxCategoryChartComponent, por ejemplo. {Date} Para el IgxFinancialChartComponent 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 IgxNumberFormatSpecifier para representar los precios en dólares estadounidenses de las películas más taquilleras de los Estados Unidos.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Ejemplo de rango de ejes

    En los gráficos de Angular, puede definir un valor de rango 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 establecen configurando las yAxisMinimumValue opciones 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.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    App Builder | CTA Banner

    Modos de eje y escala

    En los controles IgxFinancialChartComponent e IgxCategoryChartComponent, puede elegir si sus datos se trazan en escala logarítmica a lo largo del eje y cuando la propiedad yAxisIsLogarithmic se establece en verdadero o en escala lineal cuando esta propiedad se establece 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 componente IgxFinancialChartComponent le permite 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 IgxFinancialChartComponent 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.

    EXAMPLE

    Ejemplo de espacio entre ejes

    La xAxisGap propiedad de los gráficos Angular determina la cantidad de espacio entre las columnas o barras de las series trazadas. Esta propiedad acepta un valor numérico entre 0,0 y 1,0. El valor representa un ancho relativo del espacio del número disponible de píxeles entre la serie. Establecer esta propiedad en 0 significaría que no hay ningún espacio representado entre la serie, y establecerla en 1 representaría el espacio máximo disponible.

    La xAxisMaximumGap propiedad de los gráficos de Angular determina el valor de espacio máximo que se permitirá. Este valor predeterminado se establece en 1.0, pero se puede cambiar en función de lo que establezca xAxisGap.

    La xAxisMinimumGapSize propiedad de los gráficos de Angular 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.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Ejemplo de superposición de ejes

    La xAxisOverlap 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 del número disponible de píxeles dedicados a cada serie. Si se establece esta propiedad en un valor negativo (hasta -1,0), las categorías se alejan unas de otras, lo que genera una brecha entre ellas. Por el contrario, si se establece esta propiedad en un valor positivo (hasta 1,0), las categorías se superponen entre sí. Un valor de 1 dirige el gráfico para representar 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.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    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: