Opções do eixo Blazor
Em todos os gráficos Ignite UI for Blazor, 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 Blazor 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
O Blazor Charts permite 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 optar, o que pode ser feito definindo a propriedade UseEnhancedIntervalManagement como true. Então, se você preferir exibir quantos rótulos couberem nas dimensões do eixo sem definir manualmente a propriedade Interval do eixo, você pode definir a propriedade EnhancedIntervalPreferMoreCategoryLabels 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 do gráfico para garantir que os rótulos possam caber. Isso é algo que pode ser optado inicialmente definindo primeiro a propriedade AutoMarginAndAngleUpdateMode no gráfico como SizeChanging ou SizeChangingAndZoom. Isso dirá ao gráfico quando reavaliar a margem automática e o ângulo aplicados aos rótulos, se desejado.
Após definir o AutoMarginAndAngleUpdateMode, você pode definir a propriedade ShouldAutoExpandMarginForInitialLabels como true para optar pela margem automática ou definir a propriedade ShouldConsiderAutoRotationForInitialLabels como true para a rotação automática. Você também pode personalizar ainda mais a margem automática que é 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 IgbNumberFormatSpecifier e IgbDateTimeFormatSpecifier 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 IgbCategoryChart, por exemplo, {Date}. Para o IgbFinancialChart, o número é o contexto porque ele usa um eixo numérico, portanto, precisa ser definido como {0}.
O exemplo a seguir formata o eixo y com um IgbNumberFormatSpecifier para representar os preços em $USD dos principais filmes de bilheteria nos Estados Unidos.
Axis Range Example
Nos gráficos Blazor, 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 do eixo numérico e de tempo com base nos pontos de valor correspondente mais baixo e mais alto 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, você pode querer definir o YAxisMinimumValue como 800 para que haja um valor de espaço de 50 entre o mínimo do eixo e o menor valor dos pontos de dados. A mesma ideia pode ser aplicada ao valor mínimo do eixo e ao maior valor dos pontos de dados usando a propriedade YAxisMaximumValue.
Axis Modes & Scale
Nos controles IgbFinancialChart e IgbCategoryChart, 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 IgbFinancialChart 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 IgbFinancialChart 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 Blazor 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 da lacuna do número disponível de pixels entre as séries. Definir esta propriedade como 0 significaria que não há lacuna renderizada entre as séries, e defini-la como 1 renderizaria a lacuna máxima disponível.
A propriedade XAxisMaximumGap dos gráficos Blazor 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 Blazor determina a quantidade mínima de pixels a serem usados para o intervalo entre as categorias, se possível.
O exemplo a seguir mostra a temperatura máxima média em Celsius no Central Park da cidade de Nova York representada por um Column Chart com um XAxisGap inicialmente definido como 1, e assim haverá uma largura de categoria completa entre as colunas. Há um controle deslizante que permite que você configure o gap neste exemplo para que você possa ver o que os diferentes valores fazem.
Axis Overlap Example
A propriedade XAxisOverlap dos gráficos Blazor 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 do mundo comparadas pela receita total de bilheteria mundial da franquia e o filme de maior bilheteria da série, representado por um Column Chart com um XAxisOverlap inicialmente definido como 1, e assim as colunas se sobreporão completamente. Há um controle deslizante que permite que você configure 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: