javascript - 如何使用highcharts显示多个饼图

Question

我遇到了使用 High 图表显示多个饼图的问题。

我要实现的是，

我使用 highcharts 创建了三个独立的饼图，并使用我的自定义 CSS 将它们重叠。

我把所有的图表都放在一个div里面，然后写css如下。

#homepage-charts {
    position: relative;
}

#inner-chart, #center-chart, #outer-chart {
    position: absolute;
    top: 0;
    left: 0;
    
    div svg rect {
        fill: none !important;
    }
}

#inner-chart {
    z-index: 4;
}

#center-chart {
    z-index: 3;
}

#outer-chart {
    z-index: 2;
}

终于来了，

问题是，当我像上面那样创建时，我无法单击或悬停第一个图表下方的图表。

有没有办法触发点击或将图表悬停在第一个图表后面？

或者任何无法像上面那样显示的高级图表功能？

Answer 1

您可以通过在 highcharts 对象的系列数组中依次添加多个图表来堆叠饼图。您只需将它们添加到相同的位置，但调整不同级别的大小。请参阅下面的 fiddle 。

Highcharts.chart('container', {
    title: {
        text: 'Stacked pie charts'
    },
    xAxis: {},
    labels: {},
    series: [{
        type: 'pie',
        name: 'Level 1',
        data: [{
            name: '1.1',
            y: 1.1,
            color: Highcharts.getOptions().colors[6] 
        }, {
            name: '1.2',
            y: 1.2,
            color: Highcharts.getOptions().colors[7] 
        }, {
            name: '1.3',
            y: 1.3,
            color: Highcharts.getOptions().colors[8] 
        }],
        center: [200, 200],
        size: 300,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }, {
        type: 'pie',
        name: 'Level 2',
        data: [{
            name: '2.1',
            y: 2.1,
            color: Highcharts.getOptions().colors[0] 
        }, {
            name: '2.2',
            y: 2.2,
            color: Highcharts.getOptions().colors[1] 
        }, {
            name: '2.3',
            y: 2.3,
            color: Highcharts.getOptions().colors[2] 
        }],
        center: [200, 200],
        size: 200,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }, {
        type: 'pie',
        name: 'Level 3',
        data: [{
            name: '3.1',
            y: 3.1,
            color: Highcharts.getOptions().colors[3] 
        }, {
            name: '3.2',
            y: 3.2,
            color: Highcharts.getOptions().colors[4] 
        }, {
            name: '3.3',
            y: 3.3,
            color: Highcharts.getOptions().colors[5] 
        }],
        center: [200, 200],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>