# 坐標軸（Axis） 所有的圖表除了餅圖都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側），通過設置[`chart.inverted = true`](http://www.highcharts.me/demo/index.php?p=13 "點擊查看演示") 可以讓x，y軸顯示位置對調。下圖為圖表中坐標軸組成部分 圖表坐標軸組成部分 ### 一、坐標軸組成部分 #### 1、Axis Title 坐標軸標題。默認情況下，x軸為`null`（也就是沒有title），y軸為`'Value'`，設置坐標軸標題的代碼如下： ``` xAxis:{ title:{ text:'x軸標題' } } yAxis:{ title:{ text:'y軸標題' } } ``` 更多關于Axis Title屬性請查看API文檔相關內容 [xAxis.title](http://www.highcharts.me/api/index.php#xAxis.title)、[yAxis.title](http://www.highcharts.me/api/index.php#yAxis.title)。 #### 2、Axis Labels 坐標軸標簽（分類）。Labels常用屬性有`enabled`、`formatter`、`setp`、`staggerLines` ##### 1）enabled 是否啟用Labels。x，y軸默認值都是`true`，如果想禁用（或不顯示）Labels，設置該屬性為`false`即可。 ##### 2）Formatter 標簽格式化函數。默認實現是： ``` formatter:function(){ return this.value; } ``` `this.value`代碼坐標軸上當前點的值（也就是x軸當前點的x值，y軸上當前點的y值），除了`value`變量外，還有`axis`、`chart`、`isFirst`、`isLast`可用。例如調用this.isFirst的結果如下圖所示 Custom Labels formatter 1 另外一個例子，實現更高級的自定義格式化函數，截圖如下： Custom Labels formatter 2 實現代碼如下： ``` 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+")"; } } } }, ``` ##### 3）Step Labels顯示間隔，數據類型為number（或int）。下圖說明了step的用法和作用 Y Lables width step ##### 4）staggerLines 水平軸Lables顯示行數。（該屬性只對水平軸有效）當Lables內容過多時，可以通過該屬性控制顯示的行數。和該屬性相關的還有[maxStaggerLines](http://www.highcharts.me/api/index.php#yAxis.labels.maxStaggerLines)屬性。 更多關于Lables的屬性請查看API文檔 [xAxis.labels](http://www.highcharts.me/api/index.php#xAxis.labels)、[yAxis.labels](http://www.highcharts.me/api/index.php#yAxis.labels) #### 3、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`用的多。 針對不同數據類型的坐標軸有不同的默認值。對于線性數據和`Datetime`類型數據，其默認值是[tickPixelInterval](http://www.highcharts.me/api/index.php#xAxis.tickPixelInterval)值，對于`Categorty`表示間隔一個category。 關于`tickInterval`的作用，請訪問博客中相關內容 《[如何處理Highcharts X軸數據過多時顯示問題](http://www.52wulian.org/highcharts-tickinterval/)》。 ##### 3）tickmarkPlacement 刻度線對齊方式，有`between`和`on`可選，默認是`between`。設置為`on`后的變化如下圖： xAxis tickmarkPlacement on 更多關于Tick的屬性請查看API文檔。 #### 4、Axis gridLines 坐標軸網格線。默認情況下，x軸網格線寬度為0,y軸網格線寬度為1px。網格線共有三個屬性可設置，分別是: `gridLineWidth`、`gridLineColor`、`gridLineDashStyle` ##### 1）gridLineWidth 網格線寬度。x軸默認為0，y軸默認為1px。 ##### 2）gridLineColor 網格線顏色。默認為：`#C0C0C0`。 ##### 3）gridLineDashStyle 網格線線條樣式。和Css border-style類似，常用的有：`Solid`、`Dot`、`Dash`。 下圖為自定義x和y軸的gridLines效果圖 Custom gridLines #### 4、multiple Axis 多個軸。在Highcharts中， 坐標可以是多個，最常見的是多個y軸。多軸存在時，Axis是一個數組，而在賦值時，通過Axis數組的下標與數據關聯。如下圖所示： About multiple Axis 總結如下： * `Series`中設置每個軸值時，用軸數組下標關聯。 * 設置`opposite: true`表示該軸位置反轉，即為y軸時顯示在右側，為x軸時顯示在頂部（和正常情況下x軸在下，y軸左構成反轉）。 * 在`Series`中可以設置該軸的類型，多個軸不同的類型（例如：type:'spline'），就構成了多種圖表并存的混合圖。 更多關于多軸、混合圖請查看在線演示平臺的 [兩個(Y)軸的混合圖](http://www.highcharts.me/demo/index.php?p=52)、[多個(Y)軸的混合圖](http://www.highcharts.me/demo/index.php?p=53)。 ### 二、坐標軸類型 坐標軸中，可以通過`Type`指定坐標軸類型，有`linear`、`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'] } ``` #### 1、linear 線性軸。默認類型，x軸按照`Axis.tickInterval`值增長，y軸默認是自適應。 #### 2、logarithmic 對數軸。按照數學中的對數增長，例如1,2,4,8... 用的不多，主要用于對數圖表，實例請查看在線演示平臺的 [對數直線圖](http://www.highcharts.me/demo/index.php?p=17)。 #### 3、datetime 時間軸。時間使用和Javascript 日期對象一樣，即用一個距1970年1月1日0時0分0秒的毫秒數表示時間，也就是時間戳。更多Javascript 日期對象請閱讀 [W3C school](http://www.w3school.com.cn/js/js_obj_date.asp) 相關內容。 Highcharts有很多時間格式化函數，列舉如下： ##### 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方式獲取指定時間的毫秒數，例如獲取 2013-11-14 00:00:00的毫秒數代碼如下： ``` time = Date.UTC(2013,11,14,0,0,0,0); // time = 1386979200000 (ms); ``` ##### 3）Highcharts.dateFormat(String format) Highcharts時間格式化函數，同 [PHP格式化函數](http://php.net/manual/en/function.strftime.php)。具體用法參考API文檔 [Highcharts.dateFormat()](http://www.highcharts.me/api/index.php#Highcharts.dateFormat()) ，當然，在本教程的《函數使用》章節中具體講解。 #### 4、category 數組軸。用的最多也最簡單，這里就不多說，更多請查看[在線演示平臺](http://www.highcharts.me/demo/index.php)例子。 ### 三、動態更新及其他相關屬性 #### 1、動態更新 坐標軸可以通過函數實現動態更新，在圖表繪制完畢后，你可以任意的對你更改而不需要重繪。所有相關函數都在 [Axis](http://www.highcharts.me/api/index.php#Axis) 中，本教程將在《函數使用》章節具體講解。 #### 2、其他相關屬性 出了Axis中的屬性可以對坐標軸有影響外，還有其他屬性也可以對其起作用。列舉如下： ##### 1）reversed 圖表反轉，即 `Chart.reversed`，當其值設置為`true`時，x軸和y軸顯示的位置對調。詳情請查看在線演示平臺 [軸反轉的曲線圖](http://www.highcharts.me/demo/index.php?p=13)。 ##### **2）****allowDecimals** 控制數軸是否顯示小數。 ##### **3）****min、max** 控制數軸的最小值和最大值。 注意：控制allowDecimals、min、max 屬性你可以輕松控制數軸的顯示范圍等（這也是很常見的問題） ##### **4）opposite** 軸倒置。和reversed不同的是，倒置是將軸倒置而不是x、y對調。例如y軸倒置的結果是y軸是從最大的值開始的，最小值反而在最下方。 ##### **5）plotLines** 標示線，詳見：[http://www.hcharts.cn/docs/index.php?doc=basic-plotLines](http://www.hcharts.cn/docs/index.php?doc=basic-plotLines) ##### **6）plotBands** 標示區域，詳見：[http://www.hcharts.cn/docs/index.php?doc=basic-plotBands](http://www.hcharts.cn/docs/index.php?doc=basic-plotBands) * * * （正文完，最后更新時間：2014-06-24 19:18:07）