Linhas de grade do eixo Angular
Todos os gráficos Ignite UI for Angular incluem capacidade integrada para modificar a aparência das linhas de eixo, bem como a frequência de linhas de grade principais/secundárias e marcas de escala que são renderizadas no eixo X e no eixo Y.
[!Note] the following examples can be applied to
IgxCategoryChartComponentas well asIgxFinancialChartComponentcontrols.
As linhas de grade principais do eixo são linhas longas que se estendem horizontalmente ao longo do eixo Y ou verticalmente ao longo do eixo X a partir de localizações de rótulos de eixo, e são renderizadas através da área de plotagem do gráfico. As linhas de grade secundárias do eixo são linhas que são renderizadas entre as linhas de grade principais do eixo.
As marcas de escala do eixo são exibidas ao longo de todos os eixos horizontais e verticais em cada rótulo em todas as principais posições de linha do gráfico Angular.
Angular Axis Gridlines Example
Este exemplo mostra como configurar a linha de grade do eixo para exibir linhas de grade principais e secundárias em intervalos especificados:
Angular Axis Gridlines Properties
Definir a propriedade axis interval especifica com que frequência as linhas de grade principais e os rótulos de eixo são renderizados em um eixo. Similarmente, a propriedade axis minor interval especifica com que frequência as linhas de grade secundárias são renderizadas em um eixo.
Para exibir linhas de grade secundárias que correspondem a intervalos menores, você precisa definir xAxisMinorStroke propriedades e xAxisMinorStrokeThickness no eixo. Isso ocorre porque as linhas de grade secundárias não têm uma cor ou espessura padrão e não serão exibidas sem primeiro atribuí-las.
Você pode personalizar como as linhas de grade são exibidas no gráfico Angular definindo as seguintes propriedades:
| Eixo Visual | Tipo | Nomes de propriedades | Descrição |
|---|---|---|---|
| Cor do Traço Principal | corda | xAxisMajorStroke yAxisMajorStroke |
Essas propriedades definem a cor das linhas de grade principais do eixo. |
| Cor do Traço Menor | corda | xAxisMinorStroke yAxisMinorStroke |
Essas propriedades definem a cor das linhas de grade secundárias do eixo. |
| Espessura do Traço Maior | número | xAxisMajorStrokeThickness yAxisMajorStrokeThickness |
Essas propriedades definem a espessura em pixels das principais linhas de grade do eixo. |
| Espessura de traço menor | número | xAxisMinorStrokeThickness yAxisMinorStrokeThickness |
Essas propriedades definem a espessura em pixels das linhas de grade menores do eixo. |
| Intervalo Maior | número | xAxisInterval yAxisInterval |
Essas propriedades definem o intervalo entre as principais linhas de grade e rótulos do eixo. |
| Intervalo menor | número | xAxisMinorInterval yAxisMinorInterval |
Essas propriedades definem o intervalo entre as linhas de grade secundárias do eixo, se usadas. |
| Cor do Traço da Linha do Eixo | corda | xAxisStroke yAxisStroke |
Essas propriedades definem a cor de uma linha de eixo. |
| Espessura do curso do eixo | número | xAxisStrokeThickness yAxisStrokeThickness |
Essas propriedades definem a espessura em pixels de uma linha de eixo. |
Em relação ao Intervalo Maior e Menor na tabela acima, é importante notar que o intervalo maior para rótulos de eixo também será definido por esse valor, exibindo um rótulo no ponto no eixo associado ao intervalo. As linhas de grade do intervalo menor são sempre renderizadas entre as linhas de grade maiores e, como tal, as propriedades do intervalo menor devem sempre ser definidas para algo muito menor (geralmente 2-5 vezes menor) do que o valor das propriedades do Intervalo maior.
Em eixos de categoria, os intervalos são representados como um índice entre o primeiro item e o último item de categoria. Geralmente, esse valor deve ser igual a 10-20% do número total de itens de categoria para o Intervalo principal, de modo que todos os rótulos de eixo se ajustem ao eixo, de modo que não sejam cortados por outros rótulos de eixo. Para intervalos menores, isso é representado como uma fração das propriedades do intervalo principal. Esse valor geralmente deve ser igual entre 0,25 e 0,5.
Em eixos numéricos, os valores de intervalo são representados como um double entre o valor mínimo do eixo e o valor máximo do eixo. Por padrão, os eixos numéricos calcularão e encontrarão automaticamente um intervalo bom e redondo com base nos valores mínimos e máximos do eixo.
Nos eixos de data e hora, esse valor é representado como intervalo de tempo entre o valor mínimo e o valor máximo do eixo.
O exemplo a seguir demonstra como personalizar as linhas de grade definindo as propriedades acima:
Os eixos do também têm a capacidade de colocar uma matriz de traços nas linhas de IgxDataChartComponent grade principais e secundárias, utilizando as majorStrokeDashArray propriedades e minorStrokeDashArray, respectivamente. A linha do eixo real também pode ser tracejada definindo a strokeDashArray propriedade do eixo correspondente. Essas propriedades usam uma matriz de números que descreverão o comprimento dos traços para as linhas de grade correspondentes.
O exemplo a seguir demonstra um IgxDataChartComponent conjunto com as propriedades da matriz de traço acima:
Angular Axis Tickmarks Example
As marcas de escala do eixo são ativadas definindo as xAxisTickLength propriedades e yAxisTickLength como um valor maior que 0. Essas propriedades especificam o comprimento dos segmentos de linha que formam as marcas de escala.
As marcas de escala são sempre estendidas a partir da linha do eixo e apontam para a direção dos rótulos. Os rótulos são deslocados pelo valor do comprimento das marcas de escala para evitar sobreposição. Por exemplo, com a propriedade definida como 5, os yAxisTickLength rótulos do eixo serão deslocados para a esquerda por esse valor.
O exemplo a seguir demonstra como personalizar as marcas de seleção definindo as propriedades acima:
Angular Axis Tickmarks Properties
Você pode personalizar como as marcas de escala do eixo são exibidas em nossos bate-papos Angular definindo as seguintes propriedades:
| Eixo Visual | Tipo | Nomes de propriedades | Descrição |
|---|---|---|---|
| Cor do traço do carrapato | corda | xAxisTickStroke yAxisTickStroke |
Essas propriedades definem a cor das marcas de seleção. |
| Espessura do traço de carrapato | número | xAxisTickStrokeThickness yAxisTickStrokeThickness |
Essas propriedades definem a espessura das marcas de escala do eixo. |
| Comprimento do traço do carrapato | número | xAxisTickLength yAxisTickLength |
Essas propriedades definem o comprimento das marcas de escala do eixo. |
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