我正在尝试在向下钻取（第 3 级）上创建分组堆叠柱形图，但无法实现相同的效果。
所附图像是图表的外观 -预期分组堆积柱形图（Highchart）。
请参考下面的代码或小提琴的链接 - http://jsfiddle.net/archna_dhingra/cjjpkjLf/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function() {
var drilldownChart, drilldownEvent, drilldownLevel = 0;
$('#container').highcharts({
"chart": {
"type": "column",
"events": {
drilldown: function(e) {
if (!e.seriesOptions) {
updateGraph(true, this, e);
}
},
drillup: function(e) {
if (!e.seriesOptions.flag) {
drilldownLevel = e.seriesOptions._levelNumber;
updateGraph(false);
}
}
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {
click: function(event) {
return false;
}
}
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"style": {
"textShadow": false,
"fontSize": "10px"
}
}
}
},
"legend": {
"enabled": true,
"layout": "vertical",
"align": "left",
"x": 0,
"verticalAlign": "top",
"y": 140,
"floating": false
},
"yAxis": {
"stackLabels": {
"enabled": false,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"title": {
"text": "Stacked Column Drilldown Chart",
"fontWeight": "bold"
},
"xAxis": {
"title": {},
"type": "category"
},
"yAxis": [{
"title": {
"text": "Number of Students"
},
"min": 0,
"allowDecimals": false
}, {
"opposite": true,
"title": {
"text": "My Score"
},
"min": 0
}],
"series": [{
"name": "Outstanding",
"color": "rgb(102, 168, 255)",
"data": [{
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
}]
}, {
"name": "Very Good",
"color": "rgb(128, 183, 255)",
"data": [{
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
}]
}, {
"name": "Satisfactory",
"color": "rgb(179, 212, 255)",
"data": [{
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
}]
}, {
"name": "Needs Improvement",
"color": "rgb(204, 226, 255)",
"data": [{
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
}]
}, {
"name": "Not Performing",
"color": "rgb(230, 242, 255)",
"data": [{
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
}]
}]
});
function updateGraph(isDrilldown, chart, e) {
if (isDrilldown) {
drilldownLevel++;
drilldownChart = chart;
drilldownEvent = e;
if (drilldownLevel === 1) {
var drilldowns = {
'Social Science': {
name: 'Outstanding',
color: 'rgb(102, 168, 255)',
data: [{
name: 'Geography',
y: 7,
drilldown: true
}, {
name: 'History',
y: 4
}, {
name: 'Civics',
y: 9
}]
}
},
drilldowns2 = {
'Social Science': {
name: 'Very Good',
color: 'rgb(128, 183, 255)',
data: [{
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 8
}, {
name: 'Civics',
y: 2
}],
},
},
drilldowns3 = {
'Social Science': {
name: 'Satisfactory',
color: 'rgb(179, 212, 255)',
data: [{
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 1
}],
}
},
drilldowns4 = {
'Social Science': {
name: 'Needs Improvement',
color: 'rgb(204, 226, 255)',
data: [{
name: 'Geography',
y: 2,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 2
}]
}
},
drilldowns5 = {
'Social Science': {
name: 'Not Performing',
color: 'rgb(230, 242, 255)',
data: [{
name: 'Geography',
y: 6,
drilldown: true
}, {
name: 'History',
y: 3
}, {
name: 'Civics',
y: 0
}],
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name],
series3 = drilldowns3[e.point.name],
series4 = drilldowns4[e.point.name],
series5 = drilldowns5[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.addSingleSeriesAsDrilldown(e.point, series4);
chart.addSingleSeriesAsDrilldown(e.point, series5);
chart.applyDrilldown();
} else if (drilldownLevel === 2) {
var drilldown1 = {
"Geography": {
"name": "Yes",
color: 'red',
"data": [{
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
}]
}
};
var drilldown2 = {
"Geography": {
"name": "No",
color: 'green',
"data": [{
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
}]
}
};
chart.addSingleSeriesAsDrilldown(e.point, drilldown1[e.point.name]);
chart.addSingleSeriesAsDrilldown(e.point, drilldown2[e.point.name]);
chart.applyDrilldown();
}
}
}
});
提前致谢。