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
        }]
    });
});

或者看看這個非常精細的世界人口的潛力例子 。