highcharts 组系列点击事件获取类别中的所有数据答案

【问题标题】：highcharts group series click event to get all data in catagoryhighcharts 组系列点击事件获取类别中的所有数据
【发布时间】：2018-11-24 18:38:58
【问题描述】：

我有以下图表，点击后将返回类别以及您点击的系列数据。如果您在图表中看到我的条形图中有三列，我想在点击时获取所有三个系列数据。有没有办法做到这一点？

这是我现有的 JS Fiddle js-fiddle-link

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

        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 () {
                        alert('Category: ' + this.category + ', value: ' + this.y);
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    },
    {
        data: [50, 71.5, 106.4]
    },
    {
        data: [21, 71.5, 106.4]
    }]
});

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案1】：

我不知道是否有更简单的方法来访问系列数据，但这个 sn-p 可以满足您的需求。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

        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 () {
                        const series = this.series.chart.options.series;
                        const values = series.map(serie => serie.data[this.index]);
                        console.log(values);
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    },
    {
        data: [50, 71.5, 106.4]
    },
    {
        data: [21, 71.5, 106.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

【讨论】：

谢谢你，这就是我想要的。