javascript - 具有 n 级的 Highcharts 堆叠钻取

Question

我正在尝试制作一个柱形堆叠图表以及向下钻取，但 highcharts API 似乎目前不支持它。已经做了一些，但它不能正常工作。 http://jsfiddle.net/souranil/T6ryr/ .

Highcharts.setOptions({
    lang: {
        FullScreenButtonTitle: "View Larger Chart"
    }
});

$(function () {
    var chart;
    $(document).ready(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
        name = 'AUM',
        data = [{
            y: 6.06,
            color: '#B7C726',
            drilldown: {
                categories: ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
                series: [{
                    name: 'Page4',
                    data: [6.06, 7.90, 11.40],
                    color: '#74489D'
                }, {
                    name: 'Page3',
                    data: [5.73, 7.26, 11.03],
                    color: '#B7C726'
                }, {
                    name: 'Page2',
                    data: [5.71, 6.98, 10.73, 11.92],
                    color: '#7CCCBF'
                }, {
                    name: 'Page1',
                    data: [5.58, 6.70, 10.31, 11.66, 0],
                    color: '#F3901D'
                }]
            } // drilldown
        }, {
            y: 7.9, //MA 10
            color: '#B7C726',
            drilldown: {
                categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                series: [{
                    name: 'Page4',
                    data: [6.06, 7.90, 11.40],
                    color: '#74489D'
                }, {
                    name: 'Page3',
                    data: [5.73, 7.26, 11.03],
                    color: '#B7C726'
                }, {
                    name: 'Page2',
                    data: [5.71, 6.98, 10.73, 11.92],
                    color: '#7CCCBF'
                }, {
                    name: 'Page1',
                    data: [5.58, 6.70, 10.31, 11.66, 0],
                    color: '#F3901D'
                }]
            } // drilldown

        }, {
            y: 11.4, //MA 11
            color: '#B7C726',
            drilldown: {
                categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                series: [{
                    name: 'Page4',
                    data: [6.06, 7.90, 11.40],
                    color: '#74489D'
                }, {
                    name: 'Page3',
                    data: [5.73, 7.26, 11.03],
                    color: '#B7C726'
                }, {
                    name: 'Page2',
                    data: [5.71, 6.98, 10.73, 11.92],
                    color: '#7CCCBF'
                }, {
                    name: 'Page1',
                    data: [5.58, 6.70, 10.31, 11.66, 0],
                    color: '#F3901D'
                }]
            } // drilldown
        }, {
            y: 11.92, //MA 12
            color: '#B7C726',
            drilldown: {
                categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                series: [{
                    name: 'Page4',
                    data: [6.06, 7.90, 11.40],
                    color: '#74489D'
                }, {
                    name: 'Page3',
                    data: [5.73, 7.26, 11.03],
                    color: '#B7C726'
                }, {
                    name: 'Page2',
                    data: [5.71, 6.98, 10.73, 11.92],
                    color: '#7CCCBF'
                }, {
                    name: 'Page1',
                    data: [5.58, 6.70, 10.31, 11.66, 0],
                    color: '#F3901D'
                }]
            } // drilldown
        }, {
            y: 10, //MA 13
            color: '#B7C726',
            drilldown: {
                categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                series: [{
                    name: 'Page4',
                    data: [6.06, 7.90, 11.40],
                    color: '#74489D'
                }, {
                    name: 'Page3',
                    data: [5.73, 7.26, 11.03],
                    color: '#B7C726'
                }, {
                    name: 'Page2',
                    data: [5.71, 6.98, 10.73, 11.92],
                    color: '#7CCCBF'
                }, {
                    name: 'Page1',
                    data: [5.58, 6.70, 10.31, 11.66, 0],
                    color: '#F3901D'
                }]
            } // drilldown
        }];



    data2 = [{
        y: 6.85, //OA09
        color: '#636466',
        drilldown: {
            categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
            series: [{
                name: 'Page4',
                data: [6.85, 7.52, 8.45],
                color: '#74489D'
            }, {
                name: 'Page3',
                data: [6.50, 7.16, 8.11, 0],
                color: '#B7C726'
            }, {
                name: 'Page2',
                data: [6.35, 7.01, 8.04, 8.52, 0],
                color: '#7CCCBF'
            }, {
                name: '1st quarter',
                data: [6.25, 6.85, 4.61, 8.52, 0],
                color: '#F3901D'
            }]
        } // drilldown
    }, {
        y: 7.52, //OA10
        color: '#636466',
        drilldown: {
            categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
            series: [{
                name: 'Page4',
                data: [6.85, 7.52, 8.45],
                color: '#74489D'
            }, {
                name: 'Page3',
                data: [6.50, 7.16, 8.11, 0],
                color: '#B7C726'
            }, {
                name: 'Page2',
                data: [6.35, 7.01, 8.04, 8.52, 0],
                color: '#7CCCBF'
            }, {
                name: 'Page1',
                data: [6.25, 6.85, 4.61, 8.52, 0],
                color: '#F3901D'
            }]
        } // drilldown
    }, {
        y: 8.45, //OA11
        color: '#636466',
        drilldown: {
            categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
            series: [{
                name: 'Page4',
                data: [6.85, 7.52, 8.45],
                color: '#74489D'
            }, {
                name: 'Page3',
                data: [6.50, 7.16, 8.11, 0],
                color: '#B7C726'
            }, {
                name: 'Page2',
                data: [6.35, 7.01, 8.04, 8.52, 0],
                color: '#7CCCBF'
            }, {
                name: 'Page1',
                data: [6.25, 6.85, 4.61, 8.52, 0],
                color: '#F3901D'
            }]
        } // drilldown
    }, {
        y: 8.57, //OA12
        color: '#636466',
        drilldown: {
            categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
            series: [{
                name: 'Page4',
                data: [6.85, 7.52, 8.45],
                color: '#74489D'
            }, {
                name: 'Page3',
                data: [6.50, 7.16, 8.11, 0],
                color: '#B7C726'
            }, {
                name: 'Page2',
                data: [6.35, 7.01, 8.04, 8.52, 0],
                color: '#7CCCBF'
            }, {
                name: 'Page1',
                data: [6.25, 6.85, 4.61, 8.52, 0],
                color: '#F3901D'
            }]
        } // drilldown
    }, {
        y: 33, //OA13
        color: '#636466',
        drilldown: {
            categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
            series: [{
                name: 'Page4',
                data: [6.85, 7.52, 8.45],
                color: '#74489D'
            }, {
                name: 'Page3',
                data: [6.50, 7.16, 8.11, 0],
                color: '#B7C726'
            }, {
                name: 'Page2',
                data: [6.35, 7.01, 8.04, 8.52, 0],
                color: '#7CCCBF'
            }, {
                name: 'Page1',
                data: [6.25, 6.85, 4.61, 8.52, 0],
                color: '#F3901D'
            }]
        } // drilldown
    }];

    function setChart(name, categories, data, color) {
        var len = chart.series.length;
        chart.yAxis[0].options.stackLabels.enabled = true;
        chart.xAxis[0].setCategories(categories);
        for (var i = 0; i < len; i++) {
            console.log(chart.series.length);
            chart.series[0].remove();
        }
        //console.log('a');
        if (data.series) {
            for (var i = 0; i < data.series.length; i++) {
                chart.addSeries({
                    name: data.series[i].name,
                    data: data.series[i].data,
                    color: data.series[i].color || 'white',
                    stacking: 'norma'
                });
            }
        } else {
            chart.addSeries({
                name: name,
                data: data
                //color: 'white'
            }, {
                name: name,
                data: data2
                //color: 'white'
            });
        }
    }

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },

        title: {
            text: 'Highcharts Nested drilldown'
        },
        subtitle: {
            text: 'Lets see how good highcharts is ...'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Volume',
                style: {
                    color: '#006633'
                }
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                },



                formatter: function () {
                    return this.y;
                    //return Highcharts.numberFormat(this.total, 2, '.')
                    /*var i = 0;
                    if (this.total < 0) {
                        return '';
                    } else {
                        var total = 0;
                        $.each(this.axis.chart.series, function(j, serie) {
                            total += serie.options.data[i];
                        });
                        i++;
                        return Highcharts.numberFormat(total, 2, ',');
                   }*/
                } // formatter
            },
            labels: {
                formatter: function () {
                    return this.value;
                },
                style: {
                    color: '#006633'
                }
            }
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            var drilldown = this.drilldown;
                            if (drilldown) { // drill down
                                chart.setTitle({
                                    text: this.series.name
                                })
                                //chart.yAxis[0].options.tickInterval = 0.5;
                                chart.yAxis[0].options.stackLabels.enabled = false;
                                setChart(null, drilldown.categories, drilldown);
                            } else { // restore
                                window.location.reload(true);
                            }
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    style: {
                        fontWeight: 'normal'
                    },
                    formatter: function () {
                        return this.y + ' ';
                    },
                    formatter: function () {
                        return Highcharts.numberFormat(this.y, 2, '.')
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                /*var i = 0;
                    if (this.total < 0) {
                        return '';
                    } else {
                        var total = 0;

                        $.each(this.axis.chart.series, function(j, serie) {
                            total += serie.options.data[i];

                        });

                        i++;
                        //return stotal;

                    }*/
                var series = this.series.chart.series,
                    total = 0,
                    x = this.point.x,
                    i;

                for (i = 0; i < series.length; i++)
                total += series[i].data[x].y

                //return this.series.name+': '+this.y+'<br/>'+
                // 'total: '+ Highcharts.numberFormat(total, 2, '.');


                var point = this.point,
                    s = this.series.name + ' : ' + this.x + ':<b>' + this.y + '($b)</b><br/>';
                //s += 'total: '+ Highcharts.numberFormat(total, 2, '.');



                if (point.drilldown) {
                    s += 'Click to view chapters';
                } else {
                    //s += 'Click to return to yearly figures';
                    s += 'Total: ' + Highcharts.numberFormat(total, 2, '.');
                }

                if (this.series.type == 'arearange') {
                    s = this.series.name + ' : ' + this.x + ':<b>' + '20-25($b)</b><br/>';
                }
                return this.series.name;
            }
        },
        series: [{
            type: 'column',
            name: 'Chapter1',
            data: data,
            color: '#B7C726'
        }, {
            type: 'column',
            name: 'Chapter2',
            data: data2,
            color: '#636466'
        }],
        exporting: {
            enabled: true
        },
    });

    var allseries = chart.series;




    });



});

我需要对堆栈元素点击和 xAxis 标签点击进行不同的处理。

1. 单击 xAxis 标签时，它应该向下钻取到具有下一级数据的柱形图(如果不存在更多向下钻取，则再次显示堆积柱形图)。
2. 如果单击堆栈元素，它应该向下钻取到包含嵌套数据的普通柱形图。

有人做过吗？

Answer 1

您可以使用 Highcharts 的向下钻取功能。

目前只有分组和堆叠列有问题。简单的堆叠或分组效果非常好，请参阅:

• > http://jsfiddle.net/highcharts/WCCDZ/
• > http://jsfiddle.net/highcharts/s5JqN/

已连接 bug report