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 asIgxFinancialChartComponent
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 xAxisLabelLocation
propriedade dos gráficos Angular permite posicionar a linha do eixo x e seus rótulos acima ou abaixo da área de plotagem. Da mesma forma, você pode usar a propriedade para posicionar o yAxisLabelLocation
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 Angular Gráfico de Dados para compartilhar eixos, adicionar vários eixos y e/ou eixos x na mesma área de plotagem ou até mesmo eixos cruzados em valores específicos. Os exemplos a seguir mostram como usar esses recursos do IgxDataChartComponent
.
Axis Sharing Example
Você pode compartilhar e adicionar vários eixos na mesma área de plotagem do Angular IgxDataChartComponent
. É um cenário comum usar share IgxTimeXAxisComponent
e adicionar vários IgxNumericYAxisComponent
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 Angular IgxDataChartComponent
também oferece 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 crossingAxis
propriedades e crossingValue
nos eixos x e y para renderizar linhas de eixo e rótulos de eixo de modo 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:
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 |