使用highcharts在drilldown上创建分组堆积柱形图

Question

我正在尝试在下钻（第3级）上创建分组堆积柱形图，但无法实现相同的目标。

附图是图表的样子 - Expected Grouped Stacked Column Graph (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();
        }
    }
}
});

提前致谢。