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

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

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

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

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

解决:

源代码:

示例:

添加图片注释,不超过 140 字(可选)

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

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

  2. 在load事件里使用renderer画圆

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

  4. 使用renderer写标签及画圆

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值