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

根据xAxis元素单击显示其他数据-Highcharts.js

1 个答案: