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