javascript - 在 highcharts 上执行单击事件时获取机器人 xAxis 值

Question

我想设置一个单击事件来获取图表中的 xAxis 值。就我而言，我有两个 xAxis 并且想同时获得它们。目前，在我的示例中，我只能获取最上面的 xAxis 值，当我在图表上执行单击事件时，如何获取这两个值？

js fiddle link

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900px"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: [{

        categories: ['Catagory 1', 'Catagory 2', 'Catagory '],
        labels: {
            style:{
            color: 'red'
            },
            formatter: function () {
                return this.value;
            }
        }
    }, 
        {
                linkedTo: 0,
                categories: ['Dec 4', 'Dec 5', 'Dec 6'],
            }],

        tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        var tableDate = this.category;
                        console.log(this);
                        alert(tableDate);
                       /*  window.location.href = '/performance_reports_detail'; */

                    }
                }
            }
        }
    },

    series: [{
        name: 'Group Value 1',
        data: [29.9, 71.5, 106.4]
    },
    {
        name: 'Group Value 2',
        data: [50, 71.5, 106.4]
    },
    {
        name: 'Group Value 3',
        data: [21, 71.5, 106.4]
    }]
});

Answer 1

您可以从类别数组中的右侧元素获取第二个 xAxis 值:

        point: {
            events: {
                click: function() {
                    var tableDate = this.category,
                        secondValue = this.series.chart.xAxis[1].categories[this.x];

                    console.log(tableDate, secondValue);
                }
            }
        }

现场演示:http://jsfiddle.net/BlackLabel/2ge5wzLs/