Web Components Diseños de ejes

    Todos los gráficos Ignite UI for Web Components 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 IgcCategoryChartComponent as well as IgcFinancialChartComponent controls.

    Axis Locations Example

    For all axes, you can specify axis location in relationship to chart plot area. The xAxisLabelLocation property of the Web Components charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the yAxisLabelLocation property to position y-axis on left side or right side of plot area.

    The following example depicts the amount of renewable electricity produced since 2009, represented by a Line Chart. There is a drop-down that lets you configure the yAxisLabelLocation so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.

    Axis Advanced Scenarios

    For more advanced axis layout scenarios, you can use Web Components Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the IgcDataChartComponent.

    Axis Sharing Example

    You can share and add multiple axes in the same plot area of the Web Components IgcDataChartComponent. It a common scenario to use share IgcTimeXAxisComponent and add multiple IgcNumericYAxisComponent to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).

    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

    In addition to placing axes outside plot area, the Web Components IgcDataChartComponent also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting crossingAxis and crossingValue properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.

    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:

    IgcDataChartComponent IgcCategoryChartComponent
    Axes ➔ IgcNumericYAxisComponent ➔ crossingAxis Ninguno
    Axes ➔ IgcNumericYAxisComponent ➔ crossingValue Ninguno
    Axes ➔ IgcNumericXAxisComponent ➔ isInverted xAxisInverted
    Axes ➔ IgcNumericYAxisComponent ➔ isInverted yAxisInverted
    Axes ➔ IgcNumericYAxisComponent ➔ LabelLocation yAxisLabelLocation
    Axes ➔ IgcNumericXAxisComponent ➔ LabelLocation xAxisLabelLocation
    Axes ➔ IgcNumericYAxisComponent ➔ LabelHorizontalAlignment yAxisLabelHorizontalAlignment
    Axes ➔ IgcNumericXAxisComponent ➔ LabelVerticalAlignment xAxisLabelVerticalAlignment
    Axes ➔ IgcNumericYAxisComponent ➔ LabelVisibility yAxisLabelVisibility
    Axes ➔ IgcNumericXAxisComponent ➔ LabelVisibility xAxisLabelVisibility