根据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

如果我理解正确，您希望在xAxis列上添加单击事件。这可以使用click事件完成

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