Question

是否可以像在x范围图中使用序列一样，将可选序列与旭日形图一起使用？在x范围图中，可以选择/取消选择系列（显示/隐藏）。您可以在朝阳图中做类似的事情吗？以某种方式将数据点分组？

x范围图中显示/隐藏系列的示例：http://jsfiddle.net/02Lqotd7/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    },{
        name: 'Project 2',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

Answer 1

首先，sunburst图表类型中只有一个系列，因此要隐藏/显示图形的一部分，您需要隐藏/显示点。但是，默认情况下不支持此功能，并且需要进行一些自定义。

最简单的解决方案是使用setVisible系列类型和内部pie选项中的legendType: 'point'方法。接下来，在afterGetAllItems事件中隐藏不必要的图例项。

var H = Highcharts;

H.seriesTypes.sunburst.prototype.pointClass.prototype.setVisible = H.seriesTypes.pie.prototype.pointClass.prototype.setVisible

H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
    e.allItems.splice(1, 1);
    e.allItems.splice(2, 1);
});

最后，它仍然可以处理点legendItemClick事件-您可以使用点update方法为隐藏点设置value: null：

    point: {
        events: {
            legendItemClick: function() {
                this.series.points.forEach(function(el) {
                    if (el.color === this.color) {
                        el.update({
                            oldValue: el.value ? el.value : el.oldValue,
                            value: el.value ? null : el.oldValue
                        }, false);
                    }
                }, this);

                this.series.chart.redraw();
            }
        }
    }

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

API：https://api.highcharts.com/class-reference/Highcharts.Point#update

您可以在森伯斯特图中显示/隐藏序列吗？

1 个答案: