Highcharts 中的饼图答案

【问题标题】：Pie of pie charts in HighchartsHighcharts 中的饼图
【发布时间】：2017-02-17 15:45:21
【问题描述】：

我正在尝试创建一个饼图，就像它们在 Excel 中显示的那样。我在 highcharts 中找不到馅饼的支持。我可以创建两个饼图，但我似乎无法将它们与线条连接起来，如下图所示。有解决办法吗？

Pie of pie charts

【问题讨论】：

没有馅饼的类型 - 但您可以通过一些编码来实现结果。您可以在绘图区域 (example) 上绘制多个饼图，然后使用 Renderer 渲染自定义形状，在本例中为连接切片的线条。

标签： javascript charts highcharts

【解决方案1】：

您必须使用 drilldown。如果你点击切片而不是图表切换到内部数据。

例如：

Highcharts.chart('container', {
    chart: {
        type: 'pie',
    },
 
    series: [{
        name: 'out',
        data: [{
            name: 'data 1',
            y: 55,
            drilldown: 'data 1'
        },{
            name: 'data 2',
            y: 45,
            drilldown: 'data 2'
        }]
    }],
    
    drilldown: {
        series: [{
            name: 'inner 1',
            id: 'data 1',
            data: [
                ['inner 1-1', 24.13],
                ['inner 1-2', 17.2],
                ['inner 1-3', 8.11],
                ['inner 1-4', 5.33],
                ['inner 1-5', 1.06],
                ['inner 1-6', 0.5]
            ]
        }, {
            name: 'inner 2',
            id: 'data 2',
            data: [
                ['inner 2-1', 5],
                ['inner 2-2', 4.32],
                ['inner 2-3', 3.68],
                ['inner 2-4', 2.96],
                ['inner 2-5', 2.53],
                ['inner 2-6', 1.45],
                ['inner 2-7', 1.24],
                ['inner 2-8', 0.85]
            ]
        }]
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="height: 400px"></div>

【讨论】：