Highcharts Multiple Series Drilldown to Multiple Series - 仅适用于系列中的最后一组

问题描述

我可能正在做一些愚蠢的事情，但还没有发现我的错误。

我的主图表显示了三种产品中每一种的员工人数的年增长率。深入研究任何产品应该会显示该产品中每种工作类型的员工人数增长..

向下钻取有效，但仅适用于产品 C。它不适用于前两组（产品 A 和 B）。

这是我的 jFiddle：https://jsfiddle.net/rufustfirefly/mzc6Lvsw/1/

代码如下：

Highcharts.chart('container',{
    chart: {
        type: 'column'
    },title: {
        text: 'Headcount By Product'
    },subtitle: {
        text: '2017 - 2021'
    },accessibility: {
        announceNewData: {
            enabled: true
        }
    },xAxis: {
        type: "category",crosshair: true
    },yAxis: {
        title: {
            text: 'Headcount'
        }

    },legend: {
        enabled: true
    },plotOptions: {
        series: {
            borderWidth: 0,dataLabels: {
                enabled: false,format: '{point.y:.0f}'
            }
        }
    },tooltip: {
        headerFormat: '<span style="font-size:11px">{point.key}</span><br>',pointFormat: '<span style="color:{point.color}">{series.name}</span>: <b>{point.y:.0f}</b><br/>',shared: true,useHTML: true
    },series: [
        {
            name: "2017",colorByPoint: false,data: [
                {
                    name: "Product A",y: 3,drilldown: "Product A 2017"
                },{
                    name: "Product B",drilldown: "Product B 2017"
                },{
                    name: "Product C",y: 4,drilldown: "Product C 2017"
                }
            ]
        },{
            name: "2018",y: 9,drilldown: "Product A 2018"
                },y: 11,drilldown: "Product B 2018"
                },y: 15,drilldown: "Product C 2018"
                }
            ]
        },{
            name: "2019",drilldown: "Product A 2019"
                },drilldown: "Product B 2019"
                },drilldown: "Product C 2019"
                }
            ]
        },{
            name: "2020",y: 19,drilldown: "Product A 2020"
                },drilldown: "Product B 2020"
                },y: 16,drilldown: "Product C 2020"
                }
            ]
        },{
            name: "2021",drilldown: "Product A 2021"
                },drilldown: "Product B 2021"
                },drilldown: "Product C 2021"
                }
            ]
        }
    ],drilldown: {
        allowPointDrilldown: false,series: [
            {
                name: "2017",id: "Product A 2017",data: [
                    ["Product Manager",1],["Business Analyst",0],["Developer",["QE",1 ]
                ],id: "Product B 2017",0 ]
                ],id: "Product C 2017",1 ]
                ]
            },{
                name: "2018",id: "Product A 2018",2],4],2 ]
                ],id: "Product B 2018",6],3 ]
                ],id: "Product C 2018",8],4 ]
                ]
            },{
                name: "2019",id: "Product A 2019",4 ]
                ],id: "Product B 2019",id: "Product C 2019",3],3 ]
                ]
            },{
                name: "2020",id: "Product A 2020",10],6 ]
                ],id: "Product B 2020",id: "Product C 2020",{
                name: "2021",id: "Product A 2021",id: "Product B 2021",id: "Product C 2021",4 ]
                ]
            }
        ]
    }
});

解决方法

您需要将每个向下钻取系列定义为单独的系列对象：

        {
            name: "2017",id: "Product A 2017",data: [
                ["Product Manager",1],["Business Analyst",0],["Developer",["QE",1 ]
            ],id: "Product B 2017",0 ]
            ],id: "Product C 2017",1 ]
            ]
        },

转换为：

{
        name: "2017",data: [
          ["Product Manager",1]
        ],},{
        id: "Product B 2017",0]
        ],{
        id: "Product C 2017",1]
        ]
      }

简化演示：https://jsfiddle.net/BlackLabel/yb5760az/