先看一張圖，有個預先認知：

1、座標軸標題
沒什麼好說的，就不在這兒浪費時間了，自己看看文件OK的。

2、座標軸刻度標籤
Labels常用屬性有enabled、formatter、step、staggerLines

2.1）enabled

是否啟用Labels 標籤，x和y軸預設值都是true。

2.2）Formatter

標籤格式化函式。可以自定義座標軸標籤的格式，y軸預設是當前值this.value，當然我們也可以強行自定義一波，如下：

程式碼：

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+")";
      }
    }
  }
}

效果：

可以看出來，Y軸已經被我們強行分了幾個等級（即改變了標籤格式）。

2.3）Step

Labels顯示間隔，也就是步長的意思，資料型別為number（或int）。

上圖可以明顯看出來效果，左邊步長的50，右邊是100，請不要在意刻度線，它畫在上面讓你可以看的更直觀。

2.4）staggerLines

水平軸 Labels 顯示行數。（該屬性只對水平軸有效）當 Lables 內容過多時，可以通過該屬性控制顯示的行數。這個還是很有用的，因為你開發中，很多時候，讀取資料庫的資料（x軸）是很多的，你不需要每個都表在圖上，用staggerLines屬性可以過濾掉沒有什麼價值的資料,但是更常用的是下面的tickInterval屬性。

3、座標軸刻度

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

3.1）tickInterval
這幾個屬性，我就重點講一下tickInterval

刻度間隔。其作用和Lables.step類似，就是不顯示過多的x軸標籤內容，不同的是，tickInterval是真正意義上的調整刻度，而Lables.step只是調整Labels顯示間隔。所以在實際應用中，tickInterval用的多
另外，針對不同資料型別的座標軸有不同的預設值。對於線性資料和Datetime型別資料，其預設值是tickPixelInterval值，對於Categorty表示間隔一個category。

3.2）tickmarkPlacement

刻度線對齊方式，有between和on可選，預設是between。設定為on後的變化如下圖：

看得出來，資料的位置，一個而是放在刻度線上的，一個是在兩條線之間

4、座標軸網格線

座標軸網格線。預設情況下，x軸網格線寬度為0,y軸網格線寬度為1px。網格線共有三個屬性可設定，分別是: gridLineWidth、gridLineColor、gridLineDashStyle

這個沒什麼說的，知道是什麼就行了，圖上一條條平行於X軸的綠色虛線就是網格線。

5、多軸

多個軸。在Highcharts中， 座標可以是多個，最常見的是多個y軸。多軸存在時，Axis是一個數組，而在賦值時，通過Axis陣列的下標與資料關聯。如下圖所示：

基本格式就像上圖展示的那樣，接下來給出一個三級Y軸的例子：

js程式碼：

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: '東京月平均天氣資料'
        },
        subtitle: {
            text: '資料來源: WorldClimate.com'
        },
        xAxis: [{
            categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                         '七月', '八月', '九月', '十月', '十一月', '十二月'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: '溫度',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true
        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: '降雨量',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: '海平面氣壓',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} mb',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 80,
            verticalAlign: 'top',
            y: 55,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: '降雨量',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }
        }, {
            name: '海平面氣壓',
            type: 'spline',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }
        }, {
            name: '溫度',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: ' °C'
            }
        }]
    });
});

效果：

總結如下：

5.1 Series中設定每個軸值時，用軸陣列下標關聯（注意下標是從 0 開始的）。

5.2 設定opposite: true表示該軸位置反轉，即為y軸時顯示在右側，為x軸時顯示在頂部（和正常情況下x軸在下，y軸左構成反轉）。

5.3 在Series中可以設定該軸的型別，多個軸不同的型別（例如：’type:’spline’），就構成了多種圖表並存的混合圖。