DIV CSS 佈局教程網

前言

所有的圖表除了餅圖都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側），通過設置chart.inverted = true 可以讓x，y軸顯示位置對調。

下面一起來學習學習Highcharts的坐標軸。

tags:

1.標題

xAxis:{
  title:{
    text:'x軸標題'
  }
}
yAxis:{
  title:{
    text:'y軸標題'
  }
}

2.標簽

labels:enabled、formatter、setp

yAxis:{
        labels:{
         enabled:true,
         formatter:function(){
           if(this.value <=3) {
             return "第一等級("+this.value+")";
           }else if(this.value >3 && this.value <=5) {
             return "第二等級("+this.value+")";
           }else {
             return "第三等級("+this.value+")";
           }
         },
         step:1  //間隔幾個線顯示一次
        }

3.網格

1.gridLineWidth

網格線寬度。x軸默認為0，y軸默認為1px。

2.gridLineColor

網格線顏色。默認為：#C0C0C0。

3.gridLineDashStyle

網格線線條樣式。和Css border-style類似，常用的有：Solid、Dot、Dash。

yAxis:{
 //gridLineWidth:'1px',  //注意如果使用了這個屬性gridLineDashStyle會不起作用
 gridLineColor:'#019000',
 gridLineDashStyle:'Dash',
}

4.類型

xAxis:{
   categories:['A','B','C']
  },
yAxis:{
   type:'datetime'
  },

5.reversed

倒置是將軸翻轉而不是x、y對調。例如y軸倒置的結果是y軸是從最大的值開始的，最小值反而在最下方

xAxis:{
        categories:['A','B','C'],
        reversed:true
      },
      yAxis:{
        type:'datetime',
        reversed:true
      },

6.opposite

當其值設置為true時，x軸和y軸顯示的位置分別上下，左右對調。

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

控制數軸的最小值和最大值。

注意：控制allowDecimals、min、max 屬性你可以輕松控制數軸的顯示范圍等（這也是很常見的問題）

總結

以上就是本文的全部內容了，大家學會了嗎？小編還會繼續更新Highcharts的文章，對Highcharts感興趣的朋友們要繼續關注，希望本文給大家學習帶來的幫助。