如何使用高图显示多个饼图

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对象的series数组中添加多个图表来堆叠饼图。你只需要将它们添加到相同的位置，但调整不同级别的大小。见小提琴波纹管。

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>