Diseños de ejes Web Components

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

Para todos los ejes, puede especificar la ubicación del eje en relación con el área de trazado del gráfico. La propiedad xAxisLabelLocation de los gráficos Web Components le permite colocar la línea del eje x y sus etiquetas en el área de trazado superior o inferior. De manera similar, puede usar la propiedad yAxisLabelLocation para colocar el eje y en el lado izquierdo o derecho del área de trazado.

El siguiente ejemplo muestra la cantidad de electricidad renovable producida desde 2009, representada por un Gráfico de líneas. Hay un menú desplegable que le permite configurar yAxisLabelLocation para que pueda visualizar cómo se ven los ejes cuando las etiquetas se colocan en el lado izquierdo o derecho en el interior o exterior del área de trazado del gráfico.

Axis Advanced Scenarios

Para escenarios de diseño de ejes más avanzados, puede utilizar Gráfico de datos Web Components para compartir ejes, agregar varios ejes y y/o x en la misma área de trazado, o incluso cruzar ejes en valores específicos. Los siguientes ejemplos muestran cómo utilizar estas funciones de IgcDataChartComponent.

Puede compartir y agregar varios ejes en la misma área de trazado de los Web Components IgcDataChartComponent. Es un escenario común utilizar compartir IgcTimeXAxisComponent y agregar múltiples IgcNumericYAxisComponent para trazar muchas fuentes de datos que tienen una amplia gama de valores (por ejemplo, precios de acciones y volúmenes de comercio de acciones).

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 los ejes fuera del área de trazado, el Web Components IgcDataChartComponent también proporciona opciones para colocar los ejes dentro del área de trazado y hacer que se crucen en valores específicos. Por ejemplo, puede crear un gráfico trigonométrico configurando las propiedades crossingAxis y crossingValue tanto en el eje x como en el eje y para representar las líneas de los ejes y las etiquetas de los ejes de manera 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:

`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`