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

您可以使用Highchart的drilldown功能。

对于基本设置，drilldown系列在drilldown配置下在单独的数组中定义。每个系列配置都有一个ID，该ID用于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