Highcharts数据提示框动态显示非x轴非y轴数据

最新推荐文章于 2021-12-08 17:54:09 发布

转载最新推荐文章于 2021-12-08 17:54:09 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/keysITer/blog/749254

文章标签：

#python #json

本文介绍如何在HighCharts中配置动态提示框显示价格数据，包括定义JSON格式数组以匹配图表X轴数据，并通过tooltip设置展示详细的价格信息。

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/keysITer/blog/749254