饼图饼图在Highcharts

时间:2017-02-17 15:45:21

标签: javascript charts highcharts

我试图创建一个像他们在excel中显示的饼图。在highcharts中我找不到馅饼的支持。我可以创建两个饼图,但我似乎无法用线连接它们,如下图所示。有解决方法吗?

Pie of pie charts

1 个答案:

答案 0 :(得分:0)

您必须使用 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>
&#13;
&#13;
&#13;