时间戳

首页 > 解决方案 > Highcharts.js - 动态禁用给定类别

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

问题描述

在 Highcharts.js 中，是否可以通过单击来禁用/启用给定类别？就像您可以通过单击来禁用/启用图例中的给定系列一样。

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

标签： highcharts

解决方案

默认情况下，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

推荐阅读