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

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

一、坐標(biāo)軸組成部分

軸標(biāo)題-Axis Title

坐標(biāo)軸標(biāo)題。默認(rèn)情況下，x軸為null（也就是沒有title），y軸為'Value'，設(shè)置坐標(biāo)軸標(biāo)題的代碼如下：

xAxis:{
title:{
text:'x軸標(biāo)題'
}
}
yAxis:{
title:{
text:'y軸標(biāo)題'
}
}

更多關(guān)于Axis Title屬性請查看API文檔相關(guān)內(nèi)容 xAxis.title、yAxis.title。

軸標(biāo)簽-Axis Labels

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

1、開啟

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

2、格式化程序

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

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

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

另外一個例子，實現(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ù)。（該屬性只對水平軸有效）當(dāng)Lables內(nèi)容過多時，可以通過該屬性控制顯示的行數(shù)。和該屬性相關(guān)的還有maxStaggerLines屬性。

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

軸刻度-Axis Tick

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

1、tickLength、tickWidth、tickColor

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

2、tickInterval

刻度間隔。其作用和Lables.step類似，就是不顯示過多的x軸標(biāo)簽內(nèi)容，不同的是，tickInterval是真正意義上的調(diào)整刻度，而Lables.step只是調(diào)整Labels顯示間隔。所以在實際應(yīng)用中，tickInterval用的多。

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

3、tickmarkPlacement

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

更多關(guān)于Tick的屬性請查看API文檔。

網(wǎng)格線-Grid Line

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

1、gridLineWidth

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

2、gridLineColor

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

3、gridLineDashStyle

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

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

多元軸-Multiple Axis

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

總結(jié)如下：

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

二、坐標(biāo)軸類型

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

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

linear

線性軸。默認(rèn)類型，x軸按照Axis.tickInterval值增長，y軸默認(rèn)是自適應(yīng)。

logarithmic

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

datetime

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

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

1、Date.getTime()

獲取當(dāng)前時間戳。實例用法如下：

time = Date.getTime(); //time = 1384442746960 (ms) 當(dāng)前時間為 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() ，當(dāng)然，在本教程的《函數(shù)使用》章節(jié)中具體講解。

category

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

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

推薦教程：

• Highcharts圖表結(jié)構(gòu)分析：詳解Highcharts基本組成
• Highcharts圖表結(jié)構(gòu)分析：詳解標(biāo)題與副標(biāo)題
• Highcharts使用教程（1）：制作簡單圖表
• Highcharts使用教程（2）：設(shè)置選項