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];         // 分类
    });
});

在线试一试

简单说明:

  1. Highcharts.addEvent : Highcharts 封装的给 DOM 添加事件函数
  2. xAxis.labelGroup.element:坐标轴数据标签对应的 SVG DOM,可以通过 console.log(xAixs) 来查看
  3. pointer.normalize :原生事件对象扩展函数,给该对象加上 chartXchartY 属性
  4. xAxis.toValue :将像素值转换成坐标轴值,对应的方向函数是: toPixels

以上所述就是小编给大家介绍的《Highcharts 坐标轴标签点击事件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Intersectional Internet

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》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具