Opções de eixo React
Em todos os gráficos Ignite UI for React, 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 React 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 React 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 optar, o que pode ser feito definindo auseEnhancedIntervalManagement propriedade como verdadeira. Então, se você preferir exibir o máximo de etiquetas que caber nas dimensões do eixo sem definir manualmente ainterval propriedade do eixo, pode definir aenhancedIntervalPreferMoreCategoryLabels propriedade no eixo como verdadeira.
O gráfico também tem a capacidade de considerar a rotação automática das etiquetas caso elas não caibam no espaço alocado, além de aplicar uma margem automática à área do gráfico para garantir que as etiquetas possam se encaixar. Isso é algo que pode ser optado inicialmente definindo aautoMarginAndAngleUpdateMode propriedade no gráfico para um ouSizeChanging outroSizeChangingAndZoom. Isso dirá ao gráfico quando reavaliar a margem automática e o ângulo aplicados às etiquetas, se desejado.
Depois de definir oautoMarginAndAngleUpdateMode, você pode definir ashouldAutoExpandMarginForInitialLabels propriedade como verdadeiro para optar pela margem automática ou definir ashouldConsiderAutoRotationForInitialLabels propriedade como verdadeiro para a rotação automática. Você também pode personalizar ainda mais a margem automática aplicada definindo eautoExpandMarginExtraPaddingautoExpandMarginMaximumValue para fornecer espaço extra ou uma margem máxima possível, respectivamente.
Formatos personalizados de etiquetas comoIgrNumberFormatSpecifier eIgrDateTimeFormatSpecifier podem ser adicionados a cada eixo por meio dasXAxisLabelFormatSpecifier coleções e.YAxisLabelFormatSpecifier Comumente usado para aplicar formatação sensível a números, datas e horas das linguagens Intl.NumberFormat e Intl.DateTimeFormat. Para que um formato personalizado seja aplicado às etiquetas, oyAxisLabelFormat ouxAxisLabelFormat precisa ser definido como nome de propriedade do item de dados noIgrCategoryChart, por exemplo{Date}, Para oIgrFinancialChart número é o contexto porque usa um eixo numérico, portanto este precisa ser definido para{0}.
O exemplo a seguir formata o yAxis com umIgrNumberFormatSpecifier para representar $USD preços dos filmes de bilheteria mais importantes dos Estados Unidos.
Axis Range Example
Nos gráficos React, você pode definir um valor mínimo de alcance e um valor máximo de alcance de um eixo numérico ou de tempo. O mínimo de alcance é o valor mais baixo do eixo e o máximo de alcance é o valor mais alto do eixo. Essas opções são definidas definindo asyAxisMinimumValue opções e (eyAxisMaximumValue).
Por padrão, os gráficos calculam os valores mínimo e máximo para a faixa numérica e de eixos de tempo com base nos pontos correspondentes mais baixos e maiores em seus dados, mas esse cálculo automático pode não ser adequado para seu conjunto de dados em todos os casos. Por exemplo, se seus dados tiverem um valor mínimo de 850, você pode querer definir oyAxisMinimumValue para 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 valor mais alto dos pontos de dados usando ayAxisMaximumValue propriedade.
Axis Modes & Scale
NosIgrFinancialChart controles eIgrCategoryChart, você pode escolher se seus dados são plotados em escala logarítmica ao longo do eixo y quando ayAxisIsLogarithmic propriedade está definida para verdadeiro ou em escala linear quando essa propriedade está definida como falso (valor padrão). Com essayAxisLogarithmBase propriedade, você pode alterar a base da escala logarítmica do valor padrão 10 para outro valor inteiro.
OIgrFinancialChart controle and permite que você escolha como seus dados são representados ao longo do eixo y usandoyAxisMode a propriedade que forneceNumeric modos ePercentChange. ONumeric modo apresenta os dados com os valores exatos, enquantoPercentChange exibe os dados como variação percentual em relação ao primeiro ponto fornecido. O valor padrão éNumeric o modo.
Além dayAxisMode propriedade, oIgrFinancialChart controle possuixAxisMode propriedade que forneceTime modosOrdinal e para o eixo x. OTime modo renderiza espaço ao longo do eixo x para lacunas nos dados (por exemplo, não é permitido negociar ações nos fins de semana ou feriados). OOrdinal modo colapsa áreas de data onde os dados não existem. O valor padrão éOrdinal o modo.
Axis Gap Example
AxAxisGap propriedade dos gráficos de React determina a quantidade de espaço entre colunas ou barras de séries plotadas. Essa propriedade aceita um valor numérico entre 0,0 e 1,0. O valor representa a largura relativa da lacuna a partir do número disponível de pixels entre as séries. Definir essa propriedade em 0 significaria que não há lacuna renderizada entre as séries, e defini-la em 1 renderizaria a lacuna máxima disponível.
AxAxisMaximumGap propriedade dos gráficos React determina o valor máximo da lacuna a ser permitido. Esse padrão está definido para 1.0, mas pode ser alterado dependendo do que você definirxAxisGap.
AxAxisMinimumGapSize propriedade dos gráficos de React 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 Quadro de Colunas com um inicialmente definidoxAxisGap como 1, e assim haverá a largura total da 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
AxAxisOverlap propriedade dos gráficos de React 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 em relação ao número disponível de pixels dedicados a cada série. Definir essa propriedade com um valor negativo (até -1,0) resulta em as categorias sendo afastadas umas das outras, criando uma lacuna entre si. Por outro lado, definir essa propriedade com um valor positivo (até 1,0) resulta em as 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 entre as 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 Quadro de Colunas com umxAxisOverlap inicialmente definido como 1, e assim as colunas se sobrepõem 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: