我有一个带有多级向下钻取选项的柱形图。我需要在二级向下钻取显示有关特定列的表格信息。向下钻取或弹出模式的信息将完成工作。我使用HighCharts制作了char。这是我的代码和钻取工作完美。
Highcharts.chart('containerbreachgraph', {
chart: {
type: 'column'
},
exporting: {
enabled: false
},
title: {
text: 'SLA Breaches in 30 days'
},
subtitle: {
text: ''
},
xAxis: {
type: 'category',
title:{
text: ''
}
},
yAxis: {
title:{
text: 'Count'
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'SLA Breaches',
data: [{
name: 'Under Development',
y: 75,
drilldown: 'Under Development',
color: 'rgb(2, 136, 209)'
}, {
name: 'UAT',
y: 34,
drilldown: 'UAT',
color: 'rgb(2, 136, 209)'
}, {
name: 'Product Implementation Approval',
y: 82,
drilldown: 'PI Approval',
color: 'rgb(2, 136, 209)'
}]
}],
drilldown: {
allowPointDrilldown: true,
"series":
[
{
"id": "Under Development",
"name": "Under Development",
"colorByPoint": true,
"data": [
{
"name": "COB TEAM",
"y": 50,
"drilldown": "Under Development COB TEAM"
},
{
"name": "Power ATM",
"y": 20,
"drilldown": "Under Development Power ATM"
},
{
"name": "BaNCS Team",
"y": 5,
"drilldown": "Under Development BaNCS Team"
}
]
},
{
"id": "PI Approval",
"name": "PI Approval",
"colorByPoint": true,
"data": [
{
"name": "COB TEAM",
"y": 12,
"drilldown": "PI Approval COB TEAM"
},
{
"name": "Power ATM",
"y": 20,
"drilldown": "PI Approval Power ATM"
},
{
"name": "BaNCS Team",
"y": 50,
"drilldown": "PI Approval BaNCS Team"
}
]
},
{
"id": "UAT",
"name": "UAT",
"colorByPoint": true,
"data": [
{
"name": "COB TEAM",
"y": 14,
"drilldown": "UAT COB TEAM"
},
{
"name": "Power ATM",
"y": 10,
"drilldown": "UAT Power ATM"
},
{
"name": "BaNCS Team",
"y": 10,
"drilldown": "UAT BaNCS Team"
}
]
},
{
"name": "Under Development COB TEAM",
"id": "Under Development COB TEAM",
"data": [
[
"CSAS",
12
],
[
"COB",
8
],
[
"CMRP",
13
],
[
"CSAS Credit",
7
],
[
"CMRP Update",
3
],
[
"CSAS IB/MB",
3
],
[
"CAMS Update",
4
]
]
},
{
"name": "PI Approval COB TEAM",
"id": "PI Approval COB TEAM",
"data": [
[
"CSAS",
3
],
[
"COB",
2
],
[
"CMRP",
3
],
[
"CSAS Credit",
1
],
[
"CMRP Update",
1
],
[
"CSAS IB/MB",
0
],
[
"CAMS Update",
2
]
]
},
{
"name": "UAT COB TEAM",
"id": "UAT COB TEAM",
"data": [
[
"CSAS",
2
],
[
"COB",
5
],
[
"CMRP",
3
],
[
"CSAS Credit",
2
],
[
"CMRP Update",
1
],
[
"CSAS IB/MB",
0
],
[
"CAMS Update",
1
]
]
},
{
"name": "PI Approval Power ATM",
"id": "PI Approval Power ATM",
"data": [
[
"CSAS",
12
],
[
"COB",
2
],
[
"SCMS",
3
],
[
"HRMS",
2
],
[
"MMS",
1
],
[
"CMRP",
0
]
]
},
{
"name": "Under Development Power ATM",
"id": "Under Development Power ATM",
"data": [
[
"CSAS",
5
],
[
"COB",
3
],
[
"SCMS",
2
],
[
"HRMS",
10
],
[
"MMS",
0
],
[
"CMRP",
0
]
]
},
{
"name": "UAT Power ATM",
"id": "UAT Power ATM",
"data": [
[
"CSAS",
5
],
[
"COB",
3
],
[
"SCMS",
0
],
[
"HRMS",
1
],
[
"MMS",
0
],
[
"CMRP",
1
]
]
},
{
"name": "Under Development BaNCS Team",
"id": "Under Development BaNCS Team",
"data": [
[
"CSAS",
0
],
[
"COB",
0
],
[
"SCMS",
0
],
[
"HRMS",
1
],
[
"MMS",
0
],
[
"CMRP",
0
]
]
},
{
"name": "UAT BaNCS Team",
"id": "UAT BaNCS Team",
"data": [
[
"CSAS",
2
],
[
"HRMS",
2
],
[
"MMS",
1
],
[
"CMRP",
5
]
]
},
{
"name": "PI Approval BaNCS Team",
"id": "PI Approval BaNCS Team",
"data": [
[
"CSAS",
20
],
[
"HRMS",
10
],
[
"MMS",
5
],
[
"CMRP",
5
]
]
}
]
}
});
您可以使用drilldown事件并在弹出窗口中显示信息：
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (e.point.series.name === 'SLA Breaches') {
// first level drilldown
alert('first level drilldown');
} else {
alert('drilldown');
}
}
}
},
现场演示：http://jsfiddle.net/BlackLabel/z93fy2rs/
API参考：https://api.highcharts.com/highcharts/chart.events.drilldown