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),查看打印出的值。