Highcharts數據提示框動態顯示非x軸非y軸數據

以下是在webApp中的效果，長按浮動顯示數據提示框，web端就是鼠標hover時顯示

可以看到圖表中的’4-立項階段‘是X軸數據，count：6是Y軸數據，price數據就是需要動態顯示的數據。

PS：圖表中看不到price的值是因爲服務器沒有數據，本地親測可用。

---

首先定義一個json格式數組：

//因爲測試圖表x軸有7個數據，所以此處定義長度爲7.
var labelsArray = [{name: '',price: ''}, {name: '',price: ''}, {name: '',price: ''}, {name: '',price: ''}, {name: '',price: ''}, {name: '',price: ''}, {name: '',price: ''}, ];

然後在highcharts的option下添加以下代碼：

xAxis: {
    //gridLineWidth: 1,
    categories: labelsArray,
    labels: { //設置橫軸座標的顯示樣式  
    formatter: function() {
        return this.value.name; //此處是核心   這裏設置x軸顯示的內容,Y軸同理設置yAxis的這個屬性
    },
    rotation: -45, //傾斜度  
    align: 'right'
        }
},

再對提示框tooltip進行設置：

//這裏是提示框內容的樣式
tooltip: {
    formatter: function() {
       return '<span style="color:'+this.series.color+'">'+
'<span style="color:'+this.series.color+'">'+
'count'+'</span>: <b>'+this.y+'</b><br/>'+
'<span style="color:'+this.series.color+'">'+
'price'+'</span>: <b>'+this.x.price+'</b>';
    },
},

除此之外，HighCharts還有很多屬性，如果有不理解的地方，可以在formatter的function中consolo.log(this),查看打印出的值。