Highcharts 坐标轴标签点击事件
栏目: JavaScript · 发布时间: 6年前
内容简介:通过 API 上的例子关键代码是:
通过 API 上的例子 为轴标签添加链接 我们知道可以给坐标轴标签加上跳转链接,但是这种直接跳转往往无法满足需求,我们希望这个点击行为更可控(实现自己想要的交互)。由于目前 Highcharts 并没有提供对应事件配置项,所以这里简单说明一下如何自己实现坐标轴点击事件。
方法1:将跳转链接改为执行函数
关键代码是:
let chart = Highcharts.chart('container', { xAxis: { labels: { formatter: function() { return '<a href="javascript: doSomething(\''+ this.value + '\')">' + this.value + '</a>'; } } } }); function doSomething(category) { // 当前点击的下标 let index = chart.xAxis[0].categoies.indexOf(category); // 通过 index 和 category 我们就可以根据需求实现自己的想要的交互效果了 }
方法2:给坐标轴标签加事件
关键代码是:
Highcharts.chart('container', { // 配置 }, function(chart) { // 图表渲染完毕后的回调函数 let xAxis = chart.xAxis[0]; // 给坐标的 labelGroup 添加点击事件 Highcharts.addEvent(xAxis.labelGroup.element, 'click', function(e) { // 将原生事件添加上 chartX 和 chartY 值 e = chart.pointer.normalize(e); // 根据点击事件的位置计算出所在坐标轴的值 let index = Math.ceil(xAxis.toValue(e.chartX)), // 下标 category = xAxis.categories[index]; // 分类 }); });
简单说明:
- Highcharts.addEvent : Highcharts 封装的给 DOM 添加事件函数
- xAxis.labelGroup.element:坐标轴数据标签对应的 SVG DOM,可以通过 console.log(xAixs) 来查看
-
pointer.normalize
:原生事件对象扩展函数,给该对象加上
chartX
和chartY
属性 - xAxis.toValue :将像素值转换成坐标轴值,对应的方向函数是: toPixels
以上所述就是小编给大家介绍的《Highcharts 坐标轴标签点击事件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【基本工具】S02E20 坐标轴与主次刻度用法详解
- HQChart 1.9334 版本发布,增加等比坐标、黄金分割坐标、等分坐标
- cocos creator教程之世界坐标和局部坐标
- arcgis for jsapi开发:坐标系、经纬度与平面坐标的互换
- iOS坐标系探究
- 坐标转换(c#) 原 荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript and Ajax for the Web, Sixth Edition
Tom Negrino、Dori Smith / Peachpit Press / August 28, 2006 / $24.99
Book Description Need to learn JavaScript fast? This best-selling reference’s visual format and step-by-step, task-based instructions will have you up and running with JavaScript in no time. In thi......一起来看看 《JavaScript and Ajax for the Web, Sixth Edition》 这本书的介绍吧!