javascript - add event to x-axis labels of bar highchart - Stack Overflow

admin管理员组

文章数量:1317906

I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:

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'
    }]
}); 

Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:

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

or just

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

This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?

I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:

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'
    }]
}); 

Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:

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

or just

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

This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?

• javascript
• jquery
• highcharts

Share Improve this question Follow edited Mar 25, 2016 at 7:12 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Dec 12, 2014 at 15:35 georgegeorge 3,22155 gold badges3636 silver badges5555 bronze badges 2

• Could you post live example, like jsFiddle? – Kacper Madej Commented Dec 12, 2014 at 15:56
• there's nothing to post really. If you copy and paste my chart code and provide some example data you will see what it produces – george Commented Dec 12, 2014 at 16:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Instead of:

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

Use this:

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

You should not connect classes highcharts-axis-labels and highcharts-xaxis-labels with a dot. And also the class highcharts-xaxis-labels is enough to add the event on. Here's the fiddle: http://jsfiddle/8sxLr5j8/

You can use extension which allows do it.

本文标签： javascriptadd event to xaxis labels of bar highchartStack Overflow