Question

在Highcharts.js中，是否可以通过单击来禁用/启用给定类别？通过与单击图例来禁用/启用图例中的给定系列相同的方式。

如果没有，那么下一个最佳选择是什么？

Answer 1

默认情况下，Highcharts不支持通过单击禁用类别。为了达到想要的结果，您需要添加自定义代码。例如，在render事件中，您可以向click标签添加xAxis事件，并使用新的类别和数据更新图表：

var H = Highcharts,
    categories = ['one', 'two', 'three'],
    data = [1, 2, 3];

chart = Highcharts.chart('container', {
    chart: {
        events: {
            render: function() {
                var chart = this;

                H.objectEach(chart.xAxis[0].ticks, function(tick) {
                    if (tick.label) {
                        H.addEvent(tick.label.element, 'click', function() {
                            data.splice(tick.pos, 1);
                            categories.splice(tick.pos, 1);

                            chart.update({
                                series: [{
                                    data: data
                                }],
                                xAxis: {
                                    categories: categories
                                }
                            });
                        });
                    }
                });
            }
        }
    },
    series: [{
        type: 'column',
        data: data
    }],
    xAxis: {
        categories: categories
    }
});

实时演示：http://jsfiddle.net/BlackLabel/8wfx5yve/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#update

Highcharts.js-动态禁用给定类别

1 个答案: