Развертывание нескольких графиков Highcharts

Question

Я использую пару Highcharts, как указано ниже -

Теперь, когда я нажимаю Женский / Мужской на гендерной диаграмме, я хотел бы воссоздать диаграмму «По департаментам» на основе выбранного пола.

Должен ли я заново создать диаграмму «По отделам» как новую или изменить серию развертки диаграммы «По отделам»

Вот код гендерной диаграммы

populate_gender_chart = () => {

const filter_data = this.filter_data;
const setfilterstate = this.setfilterstate;
const populate_drilldown_data = this.populate_drilldown_data;

var options = {
  chart: {
    type: "pie",        
    events:{          
      drilldown: function(e){                                    
        var filter_by_value = (e.point.name === 'Female') ? 'F': 'M'                                      
         var series = populate_drilldown_data(e)            
          this.addSeriesAsDrilldown(e.point, series[0]);            


      },          
    },
  },




populate_department_name_chart = (data) => {
      const filter_data = this.filter_data;
      const setfilterstate = this.setfilterstate;
      var options = {
        chart: {
          type: "pie",        
          events:{          
            drilldown: function(e){                        
              console.log('department drilldown')

Хотите знать, как получить ссылку на вторую диаграмму при развертывании первой диаграммы.

Answer 1

Вы можете использовать drilldown функцию Highchart.

Для базовой установки c серии drilldown определены в отдельном массиве в конфигурации drilldown. Каждой конфигурации серии присваивается идентификатор, который используется для родительской точки drilldown для идентификации ее серии.

Справочник по API:

https://www.highcharts.com/docs/chart-concepts/drilldown

https://www.highcharts.com/demo/pie-drilldown

Реагировать Пример развертки: https://codesandbox.io/s/highcharts-react-demo-ynf9i