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

最新活動推薦：年中大促|在線訂購全場7折起！點擊了解詳情>>

一、坐標軸組成部分

軸標題-Axis Title

坐標軸標題。默認情況下，x軸為null（也就是沒有title），y軸為'Value'，設置坐標軸標題的代碼如下：

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

更多關于Axis Title屬性請查看API文檔相關內容 xAxis.title、yAxis.title。

軸標簽-Axis Labels

坐標軸標簽（分類）。Labels常用屬性有enabled、formatter、setp、staggerLines。

1、開啟

是否啟用Labels。x，y軸默認值都是true，如果想禁用（或不顯示）Labels，設置該屬性為false即可。

2、格式化程序

標簽格式化函數(shù)。默認實現(xiàn)是：

formatter:function(){ return this.value; }

this.value代碼坐標軸上當前點的值（也就是x軸當前點的x值，y軸上當前點的y值），除了value變量外，還有axis、chart、isFirst、isLast可用。例如調用this.isFirst的結果如下圖所示：

另外一個例子，實現(xiàn)更高級的自定義格式化函數(shù)，截圖如下：

實現(xiàn)代碼如下：

yAxis: {        
    labels: {
        formatter:function(){
            if(this.value <=100) {
                return "第一等級("+this.value+")"; 
            }else if(this.value >100 && this.value <=200) {
                return "第二等級("+this.value+")"; 
            }else {
                return "第三等級("+this.value+")";
            }
        }
    }

Labels顯示間隔，數(shù)據(jù)類型為number（或int）。下圖說明了step的用法和作用：

4、staggerLines

水平軸Lables顯示行數(shù)。（該屬性只對水平軸有效）當Lables內容過多時，可以通過該屬性控制顯示的行數(shù)。和該屬性相關的還有maxStaggerLines屬性。

更多關于Lables的屬性請查看API文檔 xAxis.labels、yAxis.labels。

軸刻度-Axis Tick

Tick為坐標軸刻度。默認情況下x軸刻度高(tickLength屬性)為5px，寬為1px；y軸寬為0px(也就是不顯示刻度)。Tick相關的屬性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。

1、tickLength、tickWidth、tickColor

分別代表刻度線的長度、寬度、顏色。

2、tickInterval

刻度間隔。其作用和Lables.step類似，就是不顯示過多的x軸標簽內容，不同的是，tickInterval是真正意義上的調整刻度，而Lables.step只是調整Labels顯示間隔。所以在實際應用中，tickInterval用的多。

針對不同數(shù)據(jù)類型的坐標軸有不同的默認值。對于線性數(shù)據(jù)和Datetime類型數(shù)據(jù)，其默認值是tickPixelInterva值，對于Categorty表示間隔一個category。

3、tickmarkPlacement

刻度線對其方式，有between和on可選，默認是between。設置為on后的變化如下圖：

更多關于Tick的屬性請查看API文檔。

網(wǎng)格線-Grid Line

坐標軸網(wǎng)格線。默認情況下，x軸網(wǎng)線寬度為0,y軸網(wǎng)格線寬度為1px。網(wǎng)格線共有三個屬性可設置，分別是:gridLineWidth、gridLineColor、gridLineDashStyle。

1、gridLineWidth

網(wǎng)格線寬度。x軸默認為0，y軸默認為1px。

2、gridLineColor

網(wǎng)格線顏色。默認為：#C0C0C0。

3、gridLineDashStyle

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

下圖為自定義x和y軸的gridLines效果圖：

多元軸-Multiple Axis

多個軸。在Highcharts中， 坐標可以是多個，最常見的是多個y軸。多軸存在時，Axis是一個數(shù)組，而在賦值時，通過Axis數(shù)組的下標與數(shù)據(jù)關聯(lián)。如下圖所示：

總結如下：

• Series中設置每個軸值時，用軸數(shù)組下標關聯(lián)。
• 設置opposite: true表示該軸位置反轉，即為y軸時顯示在右側，為x軸時顯示在頂部（和正常情況下x軸在下，y軸左構成反轉）。
• 在Series中可以設置該軸的類型，多個軸不同的類型（例如：type:'spline'），就構成了多種圖表并存的混合圖。

二、坐標軸類型

坐標軸中，可以通過Type指定坐標軸類型，有l(wèi)inear、logarithmic、datetime、category可選，默認是：linear。指定類型的實例代碼如下：

// The types are 'linear', 'logarithmic' and 'datetime' yAxis: { type: 'linear', } // Categories are set by using an array xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] } 

linear

線性軸。默認類型，x軸按照Axis.tickInterval值增長，y軸默認是自適應。

logarithmic

對數(shù)軸。按照數(shù)學中的對數(shù)增長，例如1,2,4,8... 用的不多，主要用于對數(shù)圖表，實例請查看在線演示平臺的對數(shù)直線圖。

datetime

時間軸。時間使用和Javascript 日期對象一樣，即用一個距1970年1月1日0時0分0秒的毫秒數(shù)表示時間，也就是時間戳。更多Javascript 日期對象請閱讀  相關內容。

Highcharts有很多時間格式化函數(shù)，列舉如下：

1、Date.getTime()

獲取當前時間戳。實例用法如下：

time = Date.getTime(); //time = 1384442746960 (ms) 當前時間為 2013-11-14 23:25:46 

2、Date.UTC(year,month,day,hours,minutes,seconds,millisec)

通過UTC方式獲取指定時間的毫秒數(shù)，例如獲取 2013-11-14 00:00:00的毫秒數(shù)代碼如下：

time = Date.UTC(2013,11,14,0,0,0,0); // time = 1386979200000 (ms); 

3、Highcharts.dateFormat(String format)

Highcharts時間格式化函數(shù)，同 PHP格式化函數(shù)。具體用法參考API文檔 Highcharts.dateFormat() ，當然，在本教程的《函數(shù)使用》章節(jié)中具體講解。

category

數(shù)組軸。用的最多也最簡單，這里就不多說。

下載交互圖表Highcharts：>>點擊這里<<

推薦教程：

• Highcharts圖表結構分析：詳解Highcharts基本組成
• Highcharts圖表結構分析：詳解標題與副標題
• Highcharts使用教程（1）：制作簡單圖表
• Highcharts使用教程（2）：設置選項