以下是在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),檢視打印出的值。