将事件添加到条形图的 x 轴标签答案

【问题标题】：add event to x-axis labels of bar highchart将事件添加到条形图的 x 轴标签
【发布时间】：2014-12-12 15:35:01
【问题描述】：

我正在尝试通过单击来检索 char x 轴上的标签文本。我正在使用条形图，代码如下：

var chart = new Highcharts.Chart({
    chart: {
        type: 'column',
        backgroundColor: '#eaedf1',
        zoomType: 'x',
        renderTo: 'container'
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            pointWidth: 10,
            point: {
                events: {
                    click: function (event) {
                        console.log(event.point.name + " " + this.y);
                    }
                }
            }
        }
    },
    title: {
        text: 'Total Flow Types'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -90
        }

    },
    yAxis: {
        min: 0,
        title: {
            text: 'millions'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Flow Types'
    }]
});

然后通过单击一个按钮，使用 ajax 填充图表，效果很好。通过检查图表的 dom，我看到每个标签都是文本/文本。它们是具有类 highcharts-axis-labels highcharts-xaxis-labels 的 g/ 元素的一部分。因此，我尝试使用 jquery 检索值，例如：

$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text',   function () {
    console.log($(this).text());
});

或者只是

$('body').on('click', 'text',   function () {
    console.log($(this).text());
});

这都是 document.ready 函数的一部分。不幸的是，这些都没有检索 x 轴标签的文本？

【问题讨论】：

你能发布现场例子吗，比如 jsFiddle？
真的没什么可发的。如果您复制并粘贴我的图表代码并提供一些示例数据，您将看到它产生了什么

标签： javascript jquery highcharts

【解决方案1】：

代替：

$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
    console.log($(this).text());
});

使用这个：

$('.highcharts-xaxis-labels text').on('click', function () {
    console.log($(this).text());
});

您不应将highcharts-axis-labels 和highcharts-xaxis-labels 类与dot 连接起来。而且highcharts-xaxis-labels 类也足以添加事件。这是小提琴：http://jsfiddle.net/8sxLr5j8/

【讨论】：

【解决方案2】：

您可以使用extension，它允许这样做。

【讨论】：