Highcharts(三)坐标轴

---

title: Highcharts（三）之坐标轴
date: 2016-07-23 17:53:28
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 属性你可以轻松控制数轴的显示范围等（这也是很常见的问题）