javascript - Highcharts 中的 3 层圆环图

Question

Highcharts 支持圆环图，本质上是一个内部饼图和第二个饼图——显示为一个圆环图——围绕它。来自 Highcharts 演示网站的甜甜圈图

是否可以创建一个三层甜甜圈图表，即中间有一个饼图，一个围绕饼图的圆环图，另一个围绕第一个圆环图的图表？

我怀疑这是不可能的，因为他们的选项 plotOptions.pie.innerSize 表明它们只支持内部尺寸和外部尺寸，而不是内部尺寸、中间尺寸和外部尺寸。但也许我错过了一些东西。

Answer 1

只是尝试设置更多系列，并玩一会儿尺寸和内部尺寸，请参阅：http: //jsbin.com/oyudan/165/edit

       series: [{
            name: 'Browsers',
            data: [11,23,14,15],
            size: '40%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: [4,7,11,11,2,3,3,8,5,5,5],
            size: '70%',
            innerSize: '40%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }, {
            name: 'Versions',
            data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3],
            size: '80%',
            innerSize: '70%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }

Answer 2

您可以使用两个图表来做同样的事情。

一个图表将有一个饼图和一个甜甜圈，而第二个图表将只有一个甜甜圈图，您可以通过提供相同的中心和半径来管理它们，以便它们同步。

希望这对你有用

Answer 3

实现此目的的另一种方法是使用 Sunburst 系列类型（Highcharts 6.0.0 或更高版本）。

在这里，id如果它们下面有序列，则使用参数指定数据，并为子项指定parent参数。

例如（JSFiddle，文档）：

$(function () {
    var data = [
        {
            name: 'Anakin Skywalker',
            id: 'father'
        }, {
            name: 'Luke Skywalker',
            id: 'child-1',
            parent: 'father',
            value: 1
        }, {
            name: 'Leia Organa',
            id: 'child-2',
            parent: 'father',
            value: 3
        }, {
            name: 'Ben Skywalker',
            parent: 'child-1',
            value: 1
        }, {
            name: 'Jaina Solo',
            parent: 'child-2',
            value: 1
        }, {
            name: 'Jacen Solo',
            parent: 'child-2',
            value: 1
        }, {
            name: 'Anakin Solo',
            parent: 'child-2',
            value: 1
        }
    ];

    $('#container').highcharts({
        chart: {
            type: 'sunburst'
        },
        title: {
            text: 'Family tree'
        },
        series: [{
            data: data
        }]
    });
});

或者看看这个非常详尽的世界人口例子，了解它的潜力。