In high chart how to add event for label click

问题:

In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.

E.g. I want the event for month name in following example.

Thanks In advance.

回答1:

If you don't want to use JQuery you can use it as follows

chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
    label.style.cursor = "pointer";
    label.onclick = function(){
      alert('You clicked on '+this.textContent);
    }
});

complete code at http://jsfiddle.net/t07ok5v3/5/

回答2:

Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.

Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/

Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:

xAxis: {
  labels: {
    events: {
      click: function () { ... }
    }
  }
}

回答3:

I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.

for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
    chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
      alert('You clicked on '+this.textContent);
    }
});