【发布时间】：2020-12-30 18:22:57
【问题描述】：
我可能在做一些愚蠢的事情，但没有发现我的错误。
我的主图表显示了三种产品中每种产品的员工人数的年增长率。深入研究任何产品都应该向我展示该产品中每种工作类型的员工人数增长情况。
向下钻取有效，但仅适用于产品 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 ]
]
}
]
}
});
【问题讨论】：
标签： highcharts drilldown