如何使用高圖顯示多個餅圖

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>