Disposición de ejes Angular

    Todos los gráficos Ignite UI for Angular incluyen opciones para configurar muchas opciones de diseño de ejes, como la ubicación, además de tener la capacidad de compartir ejes entre series o tener varios ejes en el mismo gráfico. Estas características se demuestran en los ejemplos que se dan a continuación.

    [!Note] the following examples can be applied to IgxCategoryChartComponent as well as IgxFinancialChartComponent controls.

    Axis Locations Example

    Para todos los ejes, puedes especificar la ubicación del eje en relación con el área de la gráfica. LaxAxisLabelLocation propiedad de los gráficos Angular permite posicionar la línea del eje x y sus etiquetas por encima o por debajo del área del gráfico. De manera similar, puedes usar layAxisLabelLocation propiedad para posicionar el eje y en el lado izquierdo o derecho del área de la parcela.

    El siguiente ejemplo muestra la cantidad de electricidad renovable producida desde 2009, representada por una Gráfico de líneas. Hay un desplegable que te permite configurar parayAxisLabelLocation visualizar cómo se ven los ejes cuando las etiquetas se colocan a la izquierda o derecha, dentro o fuera del área gráfica del gráfico.

    Axis Advanced Scenarios

    Para escenarios de disposición de ejes más avanzados, puedes usar Angular Gráfico de datos para compartir ejes, añadir múltiples ejes y y/o x en la misma área de gráfico, o incluso cruzar ejes en valores específicos. Los siguientes ejemplos muestran cómo utilizar estas características de laIgxDataChartComponent.

    Axis Sharing Example

    Puedes compartir y añadir varios ejes en la misma área de parcela del AngularIgxDataChartComponent. Es común usar accionesIgxTimeXAxisComponent y sumar múltiplesIgxNumericYAxisComponent para graficar muchas fuentes de datos que tienen un amplio rango de valores (por ejemplo, precios de acciones y volúmenes de operaciones bursátiles).

    El siguiente ejemplo muestra un gráfico de precio de acciones y volumen comercial con un gráfico de acciones y un Gráfico de columnas trazados. En este caso, el eje Y de la izquierda lo utiliza el Gráfico de columnas y el eje Y de la derecha lo utiliza el gráfico de acciones, mientras que el eje X se comparte entre los dos.

    Axis Crossing Example

    Además de colocar ejes fuera del área de la parcela, el AngularIgxDataChartComponent también ofrece opciones para posicionar ejes dentro del área de la parcela y hacer que se crucen en valores específicos. Por ejemplo, puedes crear una tabla trigonométrica configurandocrossingAxis propiedadescrossingValue y tanto en el eje x como en el eje y para renderizar las líneas y etiquetas del eje de modo que se crucen en el punto de origen (0, 0).

    El siguiente ejemplo muestra una onda Sin y Cos representada por un gráfico de dispersión con los ejes X e Y cruzándose en el punto de origen (0, 0).

    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: d en las secciones anteriores:

    IgxDataChartComponent IgxCategoryChartComponent
    Axes ➔ IgxNumericYAxisComponent ➔ crossingAxis Ninguno
    Axes ➔ IgxNumericYAxisComponent ➔ crossingValue Ninguno
    Axes ➔ IgxNumericXAxisComponent ➔ isInverted xAxisInverted
    Axes ➔ IgxNumericYAxisComponent ➔ isInverted yAxisInverted
    Axes ➔ IgxNumericYAxisComponent ➔ LabelLocation yAxisLabelLocation
    Axes ➔ IgxNumericXAxisComponent ➔ LabelLocation xAxisLabelLocation
    Axes ➔ IgxNumericYAxisComponent ➔ LabelHorizontalAlignment yAxisLabelHorizontalAlignment
    Axes ➔ IgxNumericXAxisComponent ➔ LabelVerticalAlignment xAxisLabelVerticalAlignment
    Axes ➔ IgxNumericYAxisComponent ➔ LabelVisibility yAxisLabelVisibility
    Axes ➔ IgxNumericXAxisComponent ➔ LabelVisibility xAxisLabelVisibility