Layouts de eixo Angular

    Todos os gráficos Ignite UI for Angular 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 abaixo.

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

    Axis Locations Example

    Para todos os eixos, você pode especificar a localização do eixo em relação à área do gráfico. AxAxisLabelLocation propriedade dos gráficos Angular permite posicionar a linha do eixo x e seus rótulos acima ou abaixo da área do plot. Da mesma forma, você pode usar ayAxisLabelLocation propriedade para posicionar o eixo y no lado esquerdo ou direito da área do terreno.

    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

    Para cenários de layout de eixos mais avançados, você pode usar Angular Data Chart para compartilhar eixos, adicionar múltiplos eixos y/ou x na mesma área do gráfico, ou até mesmo cruzar eixos em valores específicos. Os exemplos a seguir mostram como usar esses recursos doIgxDataChartComponent.

    Axis Sharing Example

    Você pode compartilhar e adicionar múltiplos eixos na mesma área de plot do AngularIgxDataChartComponent. É comum usar açõesIgxTimeXAxisComponent e somar múltiplosIgxNumericYAxisComponent para plotar muitas fontes de dados que têm uma ampla faixa de valores (por exemplo, preços de ações e volumes de negociação de ações).

    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

    Além de posicionar os eixos fora da área do lote, o AngularIgxDataChartComponent também oferece opções para posicionar os eixos dentro da área do lote e fazê-los cruzar em valores específicos. Por exemplo, você pode criar um gráfico trigonométrico definindocrossingAxis propriedadescrossingValue e nos eixos x e y para renderizar linhas e rótulos de eixo de forma que estejam cruzados no ponto de origem (0, 0).

    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:

    IgxDataChartComponent IgxCategoryChartComponent
    Axes ➔ IgxNumericYAxisComponent ➔ crossingAxis Nenhum
    Axes ➔ IgxNumericYAxisComponent ➔ crossingValue Nenhum
    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