如何解决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]
]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。