하이 차트를 사용하여 여러 원형 차트를 표시하는 방법

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.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>