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 坐标轴标签点击事件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Introduction to Tornado

Introduction to Tornado

Michael Dory、Adam Parrish、Brendan Berg / O'Reilly Media / 2012-3-28 / USD 23.99

Tornado is a scalable, non-blocking web server and web application framework written in Python. It is also light-weight to deploy, fun to write for, and incredibly powerful. Tornado was written with p......一起来看看 《Introduction to Tornado》 这本书的介绍吧!

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

在线压缩/解压 HTML 代码

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

各进制数互转换器