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

本文介绍如何在Highcharts图表中实现数据提示框显示非X轴非Y轴的动态数据。通过在JavaScript中定义JSON数组,并在Highcharts选项中配置,特别是调整tooltip的设置,能够在图表上长按或hover时展示额外的price数据。尽管服务器未提供price数据,但在本地环境中已验证其有效性。
摘要由CSDN通过智能技术生成

以下是在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: ''
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值