如何使用highcharts显示多个饼图

Question

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

我必须实现的是，

我使用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对象的系列数组中相互添加几个图表来堆叠饼图。您只需将它们添加到相同位置，但调整不同级别的大小。见小提琴声。

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>