Prefácio
Todos os gráficos, exceto os gráficos de pizza, têm eixo x e eixo y. Por padrão, o eixo x é exibido na parte inferior do gráfico e o eixo y é exibido à esquerda (com vários eixos y, ele pode ser exibido nos lados esquerdo e direito). Ao configurar chart.inverted = true , as posições de exibição do eixo x-y podem ser ajustadas.
Vamos aprender os eixos de coordenadas dos HighCharts juntos.
Tags:
1. Título
xaxis: {title: {text: 'x-exis title'}} yaxis: {title: {text: 'y-eixo título'}}2 tags
Rótulos: ativado, formatador, setp
yaxis: {rótulos: {ativado: true, formatter: function () {if (this.value <= 3) {return "primeiro nível ("+this.value+")"; } else if (this.value> 3 && this.value <= 5) {return "Second nível ("+this.value+")"; } else {return "Terceiro nível ("+this.value+")"; }}, etapa: 1 // Pesquise várias linhas a serem exibidas uma vez}3. Malha
1.GridLineWidth
Largura da linha da grade. O eixo x padrão é 0 e o eixo y padrão é 1px.
2.GridlineColor
Cor da linha da grade. O padrão é : #C0C0C0 .
3.GridLinedashStyle
Estilo de linha de grade. Semelhante ao estilo de borda CSS, os usados geralmente incluem: sólido, ponto e traço .
yaxis: {// gridlineWidth: '1px', // Observe que se esse imóvel gridlinedashStyle for usado, não funcionará gridlineColor: '#019000', gridlinedashStyle: 'Dash',}4. Tipo
xaxis: {categorias: ['a', 'b', 'c']}, yaxis: {type: 'dateTime'},5. revertido
A inversão é virar o eixo em vez de x e y para ajustar. Por exemplo, o resultado da inversão do eixo y é que o eixo y começa com o maior valor, e o valor mínimo está no fundo
xaxis: {categorias: ['a', 'b', 'c'], revertido: true}, yaxis: {type: 'DateTime', revertido: true},6.Ppostos
Quando seu valor é definido como true, as posições exibidas no eixo x e no eixo y estão subindo e descendo, e esquerda e direita, respectivamente.
xaxis: {categorias: ['a', 'b', 'c'], oposto: true}, yaxis: {type: 'DateTime', oposto: true}7.Inverted
Gráfico: {type: 'line', estilo: {fontsize: "17px",}, invertido: true}8.Min, máx
Controla os valores mínimo e máximo do eixo numérico.
NOTA: Controlando as propriedades AllowDecimals, Min, Max , você pode controlar facilmente o intervalo de exibição do eixo numérico etc. (esse também é um problema muito comum)
Resumir
O acima é tudo sobre este artigo. Você aprendeu? O editor continuará atualizando os artigos da HighCharts. Amigos interessados em HighCharts devem continuar prestando atenção ao wulin.com. Espero que este artigo o ajude a aprender.