highcharts - 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",
                    y: 3,
                    drilldown: "Product B 2017"
                },
                {
                    name: "Product C",
                    y: 4,
                    drilldown: "Product C 2017"
                }
            ]
        },
        {
            name: "2018",
            colorByPoint: false,
            data: [
                {
                    name: "Product A",
                    y: 9,
                    drilldown: "Product A 2018"
                },
                {
                    name: "Product B",
                    y: 11,
                    drilldown: "Product B 2018"
                },
                {
                    name: "Product C",
                    y: 15,
                    drilldown: "Product C 2018"
                }
            ]
        },
        {
            name: "2019",
            colorByPoint: false,
            data: [
                {
                    name: "Product A",
                    y: 15,
                    drilldown: "Product A 2019"
                },
                {
                    name: "Product B",
                    y: 15,
                    drilldown: "Product B 2019"
                },
                {
                    name: "Product C",
                    y: 15,
                    drilldown: "Product C 2019"
                }
            ]
        },
        {
            name: "2020",
            colorByPoint: false,
            data: [
                {
                    name: "Product A",
                    y: 19,
                    drilldown: "Product A 2020"
                },
                {
                    name: "Product B",
                    y: 15,
                    drilldown: "Product B 2020"
                },
                {
                    name: "Product C",
                    y: 16,
                    drilldown: "Product C 2020"
                }
            ]
        },
        {
            name: "2021",
            colorByPoint: false,
            data: [
                {
                    name: "Product A",
                    y: 19,
                    drilldown: "Product A 2021"
                },
                {
                    name: "Product B",
                    y: 15,
                    drilldown: "Product B 2021"
                },
                {
                    name: "Product C",
                    y: 16,
                    drilldown: "Product C 2021"
                }
            ]
        }
    ],
    drilldown: {
        allowPointDrilldown: false,
        series: [
            {
                name: "2017",
                id: "Product A 2017",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",0],
                    ["Developer",1],
                    ["QE",1 ]
                ],
                id: "Product B 2017",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",0],
                    ["Developer",1],
                    ["QE",0 ]
                ],
                id: "Product C 2017",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",1],
                    ["Developer",1],
                    ["QE",1 ]
                ]
            },
            {
                name: "2018",
                id: "Product A 2018",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",4],
                    ["QE",2 ]
                ],
                id: "Product B 2018",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",1],
                    ["Developer",6],
                    ["QE",3 ]
                ],
                id: "Product C 2018",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",8],
                    ["QE",4 ]
                ]
            },
            {
                name: "2019",
                id: "Product A 2019",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",8],
                    ["QE",4 ]
                ],
                id: "Product B 2019",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",8],
                    ["QE",4 ]
                ],
                id: "Product C 2019",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",3],
                    ["Developer",8],
                    ["QE",3 ]
                ]
            },
            {
                name: "2020",
                id: "Product A 2020",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",10],
                    ["QE",6 ]
                ],
                id: "Product B 2020",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",8],
                    ["QE",4 ]
                ],
                id: "Product C 2020",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",3],
                    ["Developer",8],
                    ["QE",4 ]
                ]
            },
            {
                name: "2021",
                id: "Product A 2021",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",10],
                    ["QE",6 ]
                ],
                id: "Product B 2021",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",2],
                    ["Developer",8],
                    ["QE",4 ]
                ],
                id: "Product C 2021",
                data: [
                    ["Product Manager",1],
                    ["Business Analyst",3],
                    ["Developer",8],
                    ["QE",4 ]
                ]
            }
        ]
    }
});

标签： highchartsdrilldown

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

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

转换为：

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

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

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

问题描述

解决方案

推荐阅读