饼图饼图在Highcharts

Posted 2021-05-05

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

Pie of pie charts

答案

你必须使用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>

以上是关于饼图饼图在Highcharts的主要内容，如果未能解决你的问题，请参考以下文章

从 javascript 将迷你图饼图添加到 Jquery DataTable

highcharts的饼图在IE浏览器上无法显示，提示‘undefined'为空或不是对象，其他的游览器都可正常显示

小程序里echarts画的饼图在安卓手机上效果不正常？

Android画折线图柱状图饼图（使用achartengine.jar）

OpenGL——折线图柱状图饼图绘制

jquery实现柱形图饼图等