Layouts de eixos de Web Components

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

    Axis Locations Example

    Para todos os eixos, você pode especificar a localização do eixo em relação à área de plotagem do gráfico. A propriedade xAxisLabelLocation dos gráficos do Web Components permite que você posicione a linha do eixo x e seus rótulos acima ou abaixo da área de plotagem. Da mesma forma, você pode usar a propriedade yAxisLabelLocation para posicionar o eixo y no lado esquerdo ou direito da área de plotagem.

    O exemplo a seguir mostra a quantidade de eletricidade renovável produzida desde 2009, representada por um gráfico de linhas. Há um menu suspenso que permite configurar o yAxisLabelLocation para que você possa visualizar a aparência dos eixos quando os rótulos são colocados no lado esquerdo ou direito dentro ou fora da área de plotagem do gráfico.

    Axis Advanced Scenarios

    Para cenários de layout de eixo mais avançados, você pode usar Web Components Data Chart para compartilhar eixos, adicionar vários eixos y e/ou x na mesma área de plotagem ou até mesmo cruzar eixos em valores específicos. Os exemplos a seguir mostram como usar esses recursos do IgcDataChartComponent.

    Axis Sharing Example

    Você pode compartilhar e adicionar vários eixos na mesma área de plotagem do Web Components IgcDataChartComponent. É um cenário comum usar o compartilhamento IgcTimeXAxisComponent e adicionar vários IgcNumericYAxisComponent para plotar muitas fontes de dados que têm uma ampla gama 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 colocar eixos fora da área de plotagem, o Web Components IgcDataChartComponent também fornece opções para posicionar eixos dentro da área de plotagem e fazê-los cruzar em valores específicos. Por exemplo, você pode criar um gráfico trigonométrico definindo as propriedades crossingAxis e crossingValue nos eixos x e y para renderizar linhas de eixo e rótulos de eixo de forma que eles se cruzem 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:

    IgcDataChartComponent IgcCategoryChartComponent
    Axes ➔ IgcNumericYAxisComponent ➔ crossingAxis Nenhum
    Axes ➔ IgcNumericYAxisComponent ➔ crossingValue Nenhum
    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