Layouts de eixo Blazor

    Todos os gráficos Ignite UI for Blazor 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 IgbCategoryChart as well as IgbFinancialChart 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 Blazor 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 descreve a quantidade de eletricidade renovável produzida desde 2009, representada por um Line Chart. 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 Blazor 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 IgbDataChart.

    Axis Sharing Example

    Você pode compartilhar e adicionar vários eixos na mesma área de plotagem do Blazor IgbDataChart. É um cenário comum usar o compartilhamento IgbTimeXAxis e adicionar vários IgbNumericYAxis 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 Blazor IgbDataChart 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).

    Axis Timeline Example

    O exemplo a seguir demonstra como estilizar o gráfico de dados usando o IgbTimeXAxis como uma linha do tempo:

    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:

    IgbDataChart IgbCategoryChart
    Axes ➔ IgbNumericYAxis ➔ CrossingAxis Nenhum
    Axes ➔ IgbNumericYAxis ➔ CrossingValue Nenhum
    Axes ➔ IgbNumericXAxis ➔ IsInverted XAxisInverted
    Axes ➔ IgbNumericYAxis ➔ IsInverted YAxisInverted
    Axes ➔ IgbNumericYAxis ➔ LabelLocation YAxisLabelLocation
    Axes ➔ IgbNumericXAxis ➔ LabelLocation XAxisLabelLocation
    Axes ➔ IgbNumericYAxis ➔ LabelHorizontalAlignment YAxisLabelHorizontalAlignment
    Axes ➔ IgbNumericXAxis ➔ LabelVerticalAlignment XAxisLabelVerticalAlignment
    Axes ➔ IgbNumericYAxis ➔ LabelVisibility YAxisLabelVisibility
    Axes ➔ IgbNumericXAxis ➔ LabelVisibility XAxisLabelVisibility