如何处理高层图中的轴标签上的鼠标事件 [英] How to handle mouse events on axis labels in highcharts

问题描述

如何在highcharts轴标签上捕获鼠标事件？

我希望处理标签上的点击事件以执行某些操作。

丰富的图表

解决方案

轴标签可以被访问为 yAxis.ticks [x]。label.element 。这是标签的元素，现在这个元素上的任何事件都可以如下处理。

Y轴[0];
var onYaxisRedraw = function（）{
for（var tickPos in yAxis.ticks）{
var $ element = $（yAxis.ticks [tickPos] .label.element）;
$ element.unbind（'click'）;
$ element.click（function（）{
alert（hi）;
}）;
}
}
onYaxisRedraw（）;
yAxis.redraw（onYaxisRedraw）;

解开任何先前添加的处理程序通常会更好，因为相同的标签可能会在内部重复使用。 p>

处理/捕捉轴标签上的事件@ jsFiddle

How can mouse events be captured on highcharts axis label?
I wish to handle the click event on the labels to perform certain actions

A highchart demo

解决方案

The axis labels can be accessed as yAxis.ticks["x"].label.element. This is the element of the label, and now any event on this element can be handled as follows.

var yAxis = chart.yAxis[0];
var onYaxisRedraw = function() {
    for (var tickPos in yAxis.ticks) {
        var $element=$(yAxis.ticks[tickPos].label.element);
        $element.unbind('click');
        $element.click(function() {
            alert("hi");
        });
    }
}
onYaxisRedraw();
yAxis.redraw(onYaxisRedraw);

It's always better to unbind any previously added handler as same labels may be reused by highchart internally.

Handling/capturing events on axis labels @ jsFiddle

这篇关于如何处理高层图中的轴标签上的鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！