Highcharts 坐标轴标签点击事件
栏目: JavaScript · 发布时间: 5年前
内容简介:通过 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#) 原 荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Intersectional Internet
Safiya Umoja Noble、Brendesha M. Tynes / Peter Lang Publishing / 2016
From race, sex, class, and culture, the multidisciplinary field of Internet studies needs theoretical and methodological approaches that allow us to question the organization of social relations that ......一起来看看 《The Intersectional Internet》 这本书的介绍吧!