Opções de eixo Angular
Em todos os gráficos Ignite UI for Angular, os eixos fornecem propriedades para configurações visuais, como títulos, rótulos e intervalos. Esses recursos são demonstrados nos exemplos fornecidos abaixo.
Axis Titles Example
O recurso de títulos de eixo dos gráficos Angular permite adicionar informações contextuais ao seu gráfico. Você pode personalizar a aparência dos títulos dos eixos de várias maneiras diferentes, como aplicar diferentes estilos de fonte, cores, margens e alinhamentos.
Axis Labels Example
O Angular Gráficos permite controle total sobre a configuração, formatação e estilo da fonte dos rótulos exibidos em um eixo em seu gráfico. Você pode alterar o ângulo de rotação, a margem, o alinhamento horizontal e vertical, a cor, o preenchimento e a visibilidade dos rótulos dos eixos. O exemplo a seguir mostra como usar esses recursos de eixos.
Axis Labels Management & Formatting
Os eixos do gráfico têm a capacidade de executar um cálculo aprimorado em relação à quantidade de espaço disponível para os rótulos do eixo proprietário. Esse cálculo aprimorado permite que o eixo otimize a quantidade de espaço dado a ele para exibir mais rótulos para o eixo fornecido.
Esse cálculo aprimorado é algo que você precisa aceitar, o que pode ser feito definindo a useEnhancedIntervalManagement propriedade como true. Em seguida, se você preferir exibir quantos rótulos puderem caber nas dimensões do eixo sem definir manualmente a interval propriedade do eixo, poderá definir a enhancedIntervalPreferMoreCategoryLabels propriedade no eixo como true.
O gráfico também tem a capacidade de considerar a rotação automática dos rótulos se eles não couberem no espaço alocado, bem como a capacidade de aplicar uma margem automática à área de plotagem para garantir que os rótulos possam caber. Isso é algo que pode ser aceito inicialmente definindo primeiro a autoMarginAndAngleUpdateMode propriedade no gráfico como ou SizeChanging SizeChangingAndZoom. Isso informará ao gráfico quando reavaliar a margem e o ângulo automáticos aplicados aos rótulos, se desejado.
Depois de definir o autoMarginAndAngleUpdateMode, você pode definir a shouldAutoExpandMarginForInitialLabels propriedade como true para optar pela margem automática ou definir a shouldConsiderAutoRotationForInitialLabels propriedade como true para a rotação automática. Você também pode personalizar ainda mais a margem automática aplicada definindo o autoExpandMarginExtraPadding e autoExpandMarginMaximumValue para fornecer espaço extra ou uma margem máxima possível, respectivamente.
Formatos de rótulo personalizados, como IgxNumberFormatSpecifier and, IgxDateTimeFormatSpecifier podem ser adicionados a cada eixo por meio das XAxisLabelFormatSpecifier coleções and YAxisLabelFormatSpecifier. Comumente usado para aplicar a formatação de número, data e hora sensíveis ao idioma Intl.NumberFormat e Intl.DateTimeFormat. Para que um formato personalizado seja aplicado aos rótulos, o yAxisLabelFormat ou xAxisLabelFormat precisa ser definido como o nome da propriedade do item de dados no IgxCategoryChartComponent, por exemplo. {Date}. Para o IgxFinancialChartComponent o número é o contexto porque ele usa um eixo numérico, portanto, isso precisa ser definido como {0}.
O exemplo a seguir formata o yAxis com um IgxNumberFormatSpecifier $USD para representar os principais filmes de bilheteria nos Estados Unidos.
Axis Range Example
Nos gráficos Angular, você pode definir um valor mínimo e máximo de intervalo de um eixo numérico ou de tempo. O intervalo mínimo é o valor mais baixo do eixo e o intervalo máximo é o valor mais alto do eixo. Eles são definidos definindo as yAxisMinimumValue opções e yAxisMaximumValue.
Por padrão, os gráficos calcularão os valores mínimo e máximo para o intervalo numérico e do eixo de tempo com base nos pontos de valor correspondentes mais baixos e mais altos em seus dados, mas esse cálculo automático pode não ser apropriado para seu conjunto de pontos de dados em todos os casos. Por exemplo, se seus dados tiverem um valor mínimo de 850, talvez você queira definir o yAxisMinimumValue como 800 para que haja um valor de espaço de 50 entre o mínimo do eixo e o valor mais baixo dos pontos de dados. A mesma ideia pode ser aplicada ao valor mínimo do eixo e ao valor mais alto dos pontos de dados usando a yAxisMaximumValue propriedade.
Axis Modes & Scale
IgxFinancialChartComponent Nos controles e IgxCategoryChartComponent, você pode escolher se seus dados são plotados em escala logarítmica ao longo do eixo y quando a yAxisIsLogarithmic propriedade é definida como true ou em escala linear quando essa propriedade é definida como false (valor padrão). Com a propriedade, você pode alterar a base da escala logarítmica yAxisLogarithmBase do valor padrão de 10 para outro valor inteiro.
O IgxFinancialChartComponent controle and permite que você escolha como seus dados são representados ao longo do eixo y usando yAxisMode a propriedade que fornece Numeric e PercentChange modos. O Numeric modo plotará os dados com os valores exatos, enquanto o PercentChange modo exibirá os dados como alteração percentual em relação ao primeiro ponto de dados fornecido. O valor padrão é Numeric mode.
Além da yAxisMode propriedade, o IgxFinancialChartComponent controle tem xAxisMode a propriedade que fornece Time e Ordinal modos para o eixo x. O Time modo renderizará espaço ao longo do eixo x para lacunas nos dados (por exemplo, sem negociação de ações nos fins de semana ou feriados). O Ordinal modo recolherá áreas de data onde os dados não existem. O valor padrão é Ordinal mode.
Axis Gap Example
A xAxisGap propriedade dos gráficos Angular determina a quantidade de espaço entre as colunas ou barras das séries plotadas. Essa propriedade aceita um valor numérico entre 0,0 e 1,0. O valor representa uma largura relativa da lacuna do número disponível de pixels entre as séries. Definir essa propriedade como 0 significaria que não há nenhuma lacuna renderizada entre as séries e defini-la como 1 renderizaria a lacuna máxima disponível.
A xAxisMaximumGap propriedade dos gráficos Angular determina o valor máximo de lacuna a ser permitido. Esse padrão é definido como 1.0, mas pode ser alterado dependendo do que você definir xAxisGap.
A xAxisMinimumGapSize propriedade dos gráficos Angular determina a quantidade mínima de pixels a serem usados para a lacuna entre as categorias, se possível.
O exemplo a seguir mostra a temperatura máxima média em Celsius no Central Park de Nova York representada por um gráfico de colunas com um xAxisGap inicialmente definido como 1 e, portanto, haverá a largura total de uma categoria entre as colunas. Há um controle deslizante que permite configurar a lacuna neste exemplo para que você possa ver o que os diferentes valores fazem.
Axis Overlap Example
A xAxisOverlap propriedade dos gráficos Angular permite definir a sobreposição das colunas ou barras renderizadas das séries plotadas. Essa propriedade aceita um valor numérico entre -1,0 e 1,0. O valor representa uma sobreposição relativa do número disponível de pixels dedicados a cada série. Definir essa propriedade como um valor negativo (até -1,0) faz com que as categorias sejam afastadas umas das outras, produzindo uma lacuna entre si. Por outro lado, definir essa propriedade como um valor positivo (até 1,0) resulta na sobreposição das categorias entre si. Um valor de 1 direciona o gráfico para renderizar as categorias umas sobre as outras.
O exemplo a seguir mostra uma comparação das franquias de filmes de maior bilheteria mundial comparadas pela receita total de bilheteria mundial da franquia e o filme de maior bilheteria da série, representado por um gráfico de colunas com um xAxisOverlap inicialmente definido como 1 e, portanto, as colunas se sobreporão completamente. Há um controle deslizante que permite configurar a sobreposição neste exemplo para que você possa ver o que os diferentes valores fazem.
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:
GitHub