将活动添加到酒吧highchart的x轴标签(add event to x-axis labels

2019-10-21 09:53发布

我想通过点击检索的字符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轴标签highcharts-x轴的标签克/元件的一部分。 所以我试着使用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轴标签的文本?

Answer 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-labelshighcharts-xaxis-labelsdot 。 同时,也是类highcharts-xaxis-labels ,就足以在添加事件。 这里的小提琴: http://jsfiddle.net/8sxLr5j8/



Answer 2:

您可以使用扩展允许这样做。



文章来源: add event to x-axis labels of bar highchart