Предоставление дополнительных данных на основе нажатия элемента xAxis - Highcharts.js

Question

Я столкнулся с некоторыми трудностями при попытке реализовать столбчатую диаграмму «xAxis clickable». Я пытаюсь открыть дополнительные круговые диаграммы под моей столбчатой ​​диаграммой, основываясь на щелчке пользователя по одному из элементов в xAxis.

Способ построения первого графика:

function chartBuilder(data) {

            if (data.length === 0) {
                return null;
            }

            var categories = [];
            var uniqData = [
                {name : 'Fatal', data:[], color:'black', stack: 'fatal'},
                {name : 'Critical', data:[], color:'red', stack: 'critical'},
            ];
            _.each(data, function (item) {
                categories = categories.concat(item.site);
                var fatalValue = {};
                fatalValue[item.site] = parseFloat(item.fatal || 0);
                uniqData[0].data = uniqData[0].data.concat(fatalValue);
                var criticalValue = {};
                criticalValue[item.site] = parseFloat(item.critical || 0);
                uniqData[1].data = uniqData[1].data.concat(criticalValue);
            });

            var chartConfig = util.basicConfigChart(categories, uniqData);
            chartConfig.yAxis.title = {
                text: 'Num Of Events'
            };
            chartConfig.xAxis.labels = {

                formatter: function() {
                    var ret = this.value,
                        len = ret.length;

                    if (len > 10) {
                        ret = '<strong>' + ret.slice(0,ret.indexOf('_')) + '<br/>' + ret.slice(ret.indexOf('_') + 1, len) + '</strong>';
                    }

                    if (len > 25) {
                        ret = ret.slice(0,25) + '...';
                    }

                    return '<strong>' + ret + '</strong>';
                },
                useHTML: true
            };
            chartConfig.options.tooltip = {
                formatter : function () {
                    return '<strong>' + this.series.name + '</strong>:' + this.point.y + '<br>Total: ' + this.point.total;
                }
            };
            return chartConfig;
        }

Итак, в общем, мне нужен способ определить, какой элемент в xAxis был выбран, и представить ниже круговые диаграммы с данными, относящимися к этому элементу.

Answer 1

Если я правильно вас понимаю, вы хотите добавить событие click в столбцы xAxis. Это можно сделать с помощью события клика

events: {
  click: function (event) {
    alert(
      'x index: ' + event.point.x + ', \n' +
      'series.index: ' + event.point.series.index
    );
  }
}

Это событие можно добавить к определенной серии или в plotOptions, чтобы повлиять на все серии.

Приведенный выше код выдаст предупреждение с указанием соответствующих индексов.

Рабочий пример: https://jsfiddle.net/ewolden/xr17pen6/6/

API при событии нажатия: https://api.highcharts.com/highcharts/series.column.events.click