Как показать несколько круговых диаграмм с использованием высоких диаграмм

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>