博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Highcharts中Legend动态显示点值
阅读量:5847 次
发布时间:2019-06-19

本文共 1172 字,大约阅读时间需要 3 分钟。

有时候想实现鼠标在Series上移动的时候能够在Legend的Text上动态显示对应的值。可以在页面中添加如下代码(需要在该代码前引入highcharts.js)

(function (H) {   H.Series.prototype.point = {};    H.Chart.prototype.callbacks.push(function (chart) {       $(chart.container).bind('mousemove', function () {           var legendOptions = chart.legend.options,               hoverPoints = chart.hoverPoints;                      if (!hoverPoints && chart.hoverPoint) {               hoverPoints = [chart.hoverPoint];           }           if (hoverPoints) {               H.each(hoverPoints, function (point) {                   point.series.point = point;               });               H.each(chart.legend.allItems, function (item) {                   item.legendItem.attr({                       text: legendOptions.labelFormat ?                            H.format(legendOptions.labelFormat, item) :                           legendOptions.labelFormatter.call(item)                   });               });               chart.legend.render();           }       });   });   // 隐藏tooltip,允许crosshair   H.Tooltip.prototype.defaultFormatter = function () { return false; };}(Highcharts));

 

转载于:https://www.cnblogs.com/ecosu/p/4738591.html

你可能感兴趣的文章
暑假周总结八
查看>>
python访问mysql初试--菜鸟笔记
查看>>
vue 的小秘密
查看>>
How to Integrate .Net / Flex 3 with FluorineFX — Part I: The Server
查看>>
数据结构之【数组】
查看>>
团队博客作业Week5 --- 团队贡献分--分配规则
查看>>
使用物化视图解决GoldenGate不能使用中文表名问题
查看>>
Android深入浅出系列之Socket—Socket编程(一)
查看>>
请看这里
查看>>
shell脚本明文密码隐藏且加密
查看>>
JMeter基础:请求参数Parameters 、Body Data的区别
查看>>
总结SQL查询慢的50个原因
查看>>
树的深度优先遍历和广度优先遍历
查看>>
js获取网页高度
查看>>
event 事件捕捉
查看>>
django(一)
查看>>
Android EventBus源码解析
查看>>
Android 适配多种ROM的快捷方式
查看>>
A very hard Aoshu problem
查看>>
搜狗输入法用户体验
查看>>