событие кликов серии highcharts, чтобы получить все данные в категории - PullRequest
0 голосов
/ 24 ноября 2018

У меня есть следующий график, который при нажатии вернет категорию плюс данные серии, по которым вы щелкнули.Если вы видите на графике, что у меня есть три столбца в моей гистограмме, я хотел бы получить все три серии данных по клику.в любом случае, чтобы сделать это?

Вот мой существующий 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]
    }]
});

1 Ответ

0 голосов
/ 24 ноября 2018

Я не знаю, есть ли более простой способ доступа к данным серии, но этот фрагмент делает то, что вы хотите.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...