highcharts xAxis坐标标签触发点击事件,获取标签值

330 阅读1分钟

点击x轴坐标标签,能够获取点击到的对应值 (在网上找到了一些案例,但都不是我想要的,附上链接: blog.csdn.net/weixin_4404…

image.png

我想要的是:假如点击了 02-17 08:00的标签,则直接拿到 02-17 08:00 这个值,上方的链接当中是根据事件坐标计算出x的下标值,用到了Math.round/Math.ceil方法,获取的数据与我理想中的有偏差。

实现:

添加label标签: image.png

添加label点击事件:

image.png

主要代码段如下:

      function (c) {
          Highcharts.addEvent(c.xAxis[0].labelGroup.element, 'click', (e) => {
            allChartData.wind.chart.xAxis[0].labelGroup.element.childNodes.forEach(
              function (label) {
                label.style.cursor = 'pointer';
                label.onclick = function () {
                  console.log(this.textContent);
                };
              }
            );
          });
        }

但还是存在一个问题:首次点击标签时,点击事件未触发,暂时未解决