HighCharts 以轴标签为标签+蓝色圆圈跟随鼠标移动

要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。

兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts

需求: 画一个蓝色圆圈跟随鼠标移动,点击图表并保存这个点,点的右侧有以轴标签为标签的标签

分析: 调用load事件,使用renderer画个圆圈跟随鼠标,点击图标保存点用click事件,在click事件里使用renderer画一个圆和标签,标签以轴为单位

解决:

源代码:

HighCharts  以轴标签为标签+蓝色圆圈跟随鼠标移动

HighCharts  以轴标签为标签+蓝色圆圈跟随鼠标移动

示例:

HighCharts  以轴标签为标签+蓝色圆圈跟随鼠标移动

HighCharts以轴标签为标签及蓝色圆圈跟随鼠标移动以上表为例进行总结:

调用load事件,使用document.addEventListener监听鼠标

在load事件里使用renderer画圆

点击图表保存点使用click事件,获取点击点坐标

使用renderer写标签及画圆

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容