Layouts de eixos React

    Todos os gráficos Ignite UI for React incluem opções para configurar muitas opções de layout de eixo, como localização, além de ter a capacidade de compartilhar eixos entre séries ou ter vários eixos no mesmo gráfico. Esses recursos são demonstrados nos exemplos fornecidos abaixo.

    [!Note] the following examples can be applied to IgrCategoryChart as well as IgrFinancialChart controls.

    Axis Locations Example

    For all axes, you can specify axis location in relationship to chart plot area. The xAxisLabelLocation property of the React 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.

    O exemplo a seguir mostra a quantidade de eletricidade renovável produzida desde 2009, representada por um Quadro de Linhas. Há um menu suspenso que permite configurar parayAxisLabelLocation visualizar como os eixos ficam quando as etiquetas são colocadas à esquerda ou direita, dentro ou fora da área gráfica do gráfico.

    Axis Advanced Scenarios

    For more advanced axis layout scenarios, you can use React 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 IgrDataChart.

    Axis Sharing Example

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

    O exemplo a seguir mostra um gráfico de preço de ações e volume de negociação com um gráfico de ações e um gráfico de colunas plotados. Nesse caso, o eixo Y à esquerda é usado pelo gráfico de colunas e o eixo Y à direita é usado pelo gráfico de ações, enquanto o eixo X é compartilhado entre os dois.

    Axis Crossing Example

    In addition to placing axes outside plot area, the React IgrDataChart 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.

    O exemplo a seguir mostra uma onda Sin e Cos representada por um gráfico de spline de dispersão com os eixos X e Y se cruzando no ponto de origem (0, 0).

    Additional Resources

    Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima: d nas seções acima:

    IgrDataChart IgrCategoryChart
    Axes ➔ IgrNumericYAxis ➔ crossingAxis Nenhum
    Axes ➔ IgrNumericYAxis ➔ crossingValue Nenhum
    Axes ➔ IgrNumericXAxis ➔ isInverted xAxisInverted
    Axes ➔ IgrNumericYAxis ➔ isInverted yAxisInverted
    Axes ➔ IgrNumericYAxis ➔ LabelLocation yAxisLabelLocation
    Axes ➔ IgrNumericXAxis ➔ LabelLocation xAxisLabelLocation
    Axes ➔ IgrNumericYAxis ➔ LabelHorizontalAlignment yAxisLabelHorizontalAlignment
    Axes ➔ IgrNumericXAxis ➔ LabelVerticalAlignment xAxisLabelVerticalAlignment
    Axes ➔ IgrNumericYAxis ➔ LabelVisibility yAxisLabelVisibility
    Axes ➔ IgrNumericXAxis ➔ LabelVisibility xAxisLabelVisibility