Highcharts Learning Axis _javascript class Library

Objective

All charts have x and Y axes in addition to pie charts, by default, the x axis is displayed at the bottom of the chart, the y-axis appears on the left side (multiple y axes can be displayed on both sides), and chart.inverted = true you can set the x,y axis display position to swap.

Next, learn to learn highcharts axes.

Tags

1. Title

xaxis:{
  title:{
    text: ' x Axis title '
  }
}
yaxis:{
  title:{
    text: ' Y-axis title '
  }
}

2. Label

Labels:enabled, Formatter, SETP

yaxis:{
        labels:{
         enabled:true,
         formatter:function () {
           if (This.value <=3) {return
             "first rank (" + This.value+ ")";
           } else if (this.value >3 && this.value <=5) {return
             "second rank (" +this.value+ ")";
           } else {return
             "third rank (" +this.value+ ")";
           }
         ,
         step:1  //interval several lines show once
        }

3. Grid

1.gridLineWidth

Grid line width. The X axis defaults to the 0,y axis by default of 1px.

2.gridLineColor

Grid line Color. The default is : #C0C0C0.

3.gridLineDashStyle

Gridlines Line style. and CSS Border-style Similar, commonly used are:Solid, Dot, Dash.

yaxis:{
 //gridlinewidth: ' 1px ',  /Note If this property is used Gridlinedashstyle will not work
 GridlineColor: ' #019000 ',
 Gridlinedashstyle: ' Dash ',
}

4. Type

xaxis:{
   categories:[' A ', ' B ', ' C '
  },
yaxis:{
   type: ' DateTime '
  },

5.reversed

Upside down is to flip the axis instead of x and Y. For example, the y-axis inversion result is that the y-axis starts with the maximum value, and the minimum value is at the bottom.

xaxis:{
        categories:[' A ', ' B ', ' C ',
        reversed:true
      },
      yaxis:{
        type: ' DateTime ',
        Reversed:true
      },

6.opposite

When its value is set to True, the X and Y axes are positioned up and down, respectively.

xaxis:{
        categories:[' A ', ' B ', ' C ',
        opposite:true
      },
      yaxis:{
        type: ' DateTime ',
        opposite: True
      }

7.inverted

chart:{
        type: ' line ',
        style:{
          fontsize: ' 17px ',
        },
        inverted:true
      }

8.min, Max

Controls the minimum and maximum values for the axis.

Note: control allowdecimals, Min, max properties you can easily control the display range of the axis, etc. (this is also a common problem)

Summarize

The above is the entire content of this article, have you learned? Small series will continue to update Highcharts's article, Highcharts interested friends to continue to pay attention to the cloud habitat community, hope this article to help you learn.