Prefacio
Todos los gráficos, excepto los gráficos circulares, tienen el eje X y el eje y. Por defecto, el eje X se muestra en la parte inferior del gráfico y el eje Y se muestra a la izquierda (con múltiples eje y, se puede mostrar en los lados izquierdo y derecho). Al configurar chart.inverted = true , las posiciones de visualización del eje X-Y se pueden ajustar.
Aprendamos los ejes de coordenadas de Highcharts juntos.
Etiquetas:
1. Título
xaxis: {title: {Text: 'X-AXIS Title'}} Yaxis: {Title: {Text: 'Y-Axis Title'}}2. Etiquetas
Etiquetas: habilitado, formatero, setp
yaxis: {etiquetas: {habilitado: true, formatter: function () {if (this.value <= 3) {return "primer nivel ("+this.value+")"; } else if (this.Value> 3 && this.value <= 5) {return "segundo nivel ("+this.value+")"; } else {return "tercer nivel ("+this.value+")"; }}, paso: 1 // Busque varias líneas que se muestren una vez}3. Malla
1.CridlineWidth
Ancho de la línea de la cuadrícula. El eje X predeterminado es 0, y el eje Y predeterminado es 1px.
2.Gridlinecolor
Color de la línea de la cuadrícula. El valor predeterminado es : #C0C0C0 .
3.gridlinedashstyle
Estilo de línea de línea de cuadrícula. Similar a los de estilo fronterizo CSS, los comúnmente utilizados incluyen: Solid, Dot y Dash .
yaxis: {// GridlineWidth: '1px', // Tenga en cuenta que si se usa esta propiedad GridLinedashStyle, no funcionará GridlinEcolor: '#019000', GridLinedAstyle: 'Dash',}4. Tipo
xaxis: {categorías: ['a', 'b', 'c']}, yaxis: {type: 'dateTime'},5. Reversa
La inversión es voltear el eje en lugar de X e Y para ajustar. Por ejemplo, el resultado de invertir el eje y es que el eje Y comienza desde el valor más grande, y el valor mínimo está en la parte inferior
xaxis: {categorías: ['a', 'b', 'c'], invertido: true}, yaxis: {type: 'dateTime', invertido: true},6. Opuesto
Cuando su valor se establece en verdadero, las posiciones que se muestran en el eje x y el eje Y están arriba y abajo, y hacia la izquierda y hacia la derecha respectivamente.
xaxis: {categorías: ['a', 'b', 'c'], opuesto: true}, yaxis: {type: 'dateTime', opuesto: true}7. Invirtido
Chart: {type: 'line', style: {fontSize: "17px",}, invertido: true}8.Min, Max
Controla los valores mínimos y máximos del eje de número.
Nota: Control de Decimales, Min, Propiedades máximas , puede controlar fácilmente el rango de visualización del eje de número, etc. (este también es un problema muy común)
Resumir
Lo anterior se trata de este artículo. ¿Lo has aprendido? El editor continuará actualizando los artículos de HighCharts. Los amigos interesados en Highcharts deben continuar prestando atención a Wulin.com. Espero que este artículo te ayude a aprender.