Opções de eixo de Web Components
Em todos os gráficos Ignite UI for Web Components, 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 do Web Components permite que você adicione informações contextuais ao seu gráfico. Você pode personalizar a aparência dos títulos de eixo de muitas maneiras diferentes, como aplicar diferentes estilos de fonte, cores, margens e alinhamentos.
Axis Labels Example
Os Web Components Charts permitem que você tenha controle total sobre a configuração, formatação e estilo da fonte dos rótulos exibidos em um eixo no seu gráfico. Você pode alterar o ângulo de rotação, margem, alinhamento horizontal e vertical, cor, preenchimento e 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ótulos personalizados, como IgcNumberFormatSpecifier e IgcDateTimeFormatSpecifier podem ser adicionados a cada eixo por meio das coleções XAxisLabelFormatSpecifier e YAxisLabelFormatSpecifier. Comumente usado para aplicar Intl.NumberFormat e Intl.DateTimeFormat formatação de número, data e hora sensível ao idioma. 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 IgcCategoryChartComponent, por exemplo, {Date}. Para o IgcFinancialChartComponent, 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 eixo y com um IgcNumberFormatSpecifier para representar os preços em $USD dos principais filmes de bilheteria nos Estados Unidos.
Axis Range Example
Nos gráficos de Web Components, você pode definir um valor mínimo de intervalo e um valor máximo de intervalo de um eixo numérico ou de tempo. O mínimo de intervalo é o menor valor do eixo e o máximo de intervalo é o maior valor do eixo. Eles são definidos definindo as opções yAxisMinimumValue 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
Nos controles IgcFinancialChartComponent e IgcCategoryChartComponent, você pode escolher se seus dados serão plotados em escala logarítmica ao longo do eixo y quando a propriedade yAxisIsLogarithmic estiver definida como true ou em escala linear quando essa propriedade estiver definida como false (valor padrão). Com a propriedade yAxisLogarithmBase, você pode alterar a base da escala logarítmica do valor padrão de 10 para outro valor inteiro.
O IgcFinancialChartComponent e o controle permitem que você escolha como seus dados são representados ao longo do eixo y usando a propriedade yAxisMode que fornece os modos Numeric e PercentChange. O modo Numeric plotará os dados com os valores exatos, enquanto o modo PercentChange exibirá os dados como alteração percentual em relação ao primeiro ponto de dados fornecido. O valor padrão é o modo Numeric.
Além da propriedade yAxisMode, o controle IgcFinancialChartComponent tem a propriedade xAxisMode que fornece os modos Time e Ordinal para o eixo x. O modo Time renderizará o espaço ao longo do eixo x para lacunas nos dados (por exemplo, nenhuma negociação de ações nos fins de semana ou feriados). O modo Ordinal recolherá as áreas de data onde os dados não existem. O valor padrão é o modo Ordinal.
Axis Gap Example
A propriedade xAxisGap dos gráficos do Web Components determina a quantidade de espaço entre colunas ou barras de séries plotadas. Esta propriedade aceita um valor numérico entre 0,0 e 1,0. O valor representa uma largura relativa do intervalo do número disponível de pixels entre as séries. Definir esta propriedade como 0 significaria que não há intervalo renderizado entre as séries, e defini-la como 1 renderizaria o intervalo máximo disponível.
A propriedade xAxisMaximumGap dos gráficos do Web Components determina o valor máximo de gap a ser permitido. Esse padrão é definido como 1,0, mas pode ser alterado dependendo do que você definir para xAxisGap.
A propriedade xAxisMinimumGapSize dos gráficos do Web Components determina a quantidade mínima de pixels a ser usada para o espaço 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 propriedade xAxisOverlap dos gráficos do Web Components permite definir a sobreposição das colunas ou barras renderizadas de séries plotadas. Esta 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 esta propriedade para um valor negativo (até -1,0) resulta nas categorias sendo afastadas umas das outras, produzindo uma lacuna entre elas. Por outro lado, definir esta propriedade para um valor positivo (até 1,0) resulta nas categorias se sobrepondo. 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: