Highcharts异步多级向下钻取 [英] Highcharts async multi level drill down

问题描述

我正在寻求有关通过Highcharts异步钻取实现多级钻取的帮助.我能够将钻取执行到第一级，但是我需要将钻取到另一个级.以下是示例示例，供我参考.在下面的示例中，我可以深入到动物"，水果"和"汽车".我也可以单击绵羊"并能够进行深入研究，但是如何添加单击绵羊"后将显示的系列.感谢您的帮助.

I am looking for help in implementing multi-level drill down with Highcharts async drill down. I was able to implement the drill down to first level but i need drill down to one more level. Below is sample example which i am using for reference. In below example i can drill down to "Animals","Fruits" & "Cars". I also can click on Sheep and able to drilldown but how can i add series which will be displayed after i click on Sheep. Thanks for any help..

$('#container').highcharts({
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                name: 'Animals',
                                data: [
                                    {name: 'Sheep',
                                     y:5,
                                     drilldown: true
                                   },
                                    ['Cow', 3]
                                ]
                            },
                            'Fruits': {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name];

                    // Show the loading label
                    chart.showLoading('Simulating Ajax ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }

            }
        }
    },
    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});

});

推荐答案

由于其示例代码引用了该点的名称，因此应使用数据的父名称作为字典键在向下钻取"字典中创建向下钻取的值.这是钻入Dogs的示例:

Since their sample code references the point's name, should should create the drilled down values in the "drilldowns" dictionary using the data's parent name as the dictionary key. Here is an example of drilling into Dogs:

if (!e.seriesOptions) {
    var chart = this,
        drilldowns = {
            'Animals': {
                name: 'Animals',
                data: [
                    {name: 'Dogs', 
                    drilldown: true,
                     y: 2
                    },
                    ['Cows', 2],
                    ['Sheep', 3]
                ]
            },
            'Fruits': {
                name: 'Fruits',
                data: [
                    ['Apples', 5],
                    ['Oranges', 7],
                    ['Bananas', 2]
                ]
            },
            'Cars': {
                name: 'Cars',
                data: [
                    ['Toyota', 1],
                    ['Volkswagen', 2],
                    ['Opel', 5]
                ]
            },
            "Dogs": {
                name: 'Dogs',
                data: [
                    {
                        name: 'Rottweiler',
                        drilldown: true,
                        y: 6,
                    }, {
                        name: 'Pit Bull',
                        y: 2,
                    }, {
                        name: 'Poodle',
                        y: 4,
                    }]
            }, 
            "Rottweiler": {
                name: 'Rottweiler',
                data: [
                    ['male', 4],
                    ['female', 2]
                ]
            }

        },
        series = drilldowns[e.point.name];

    // Show the loading label
    chart.showLoading('Simulating Ajax ...');

    setTimeout(function () {
        chart.hideLoading();
        chart.addSeriesAsDrilldown(e.point, series);
    }, 200);
}

注意，我添加了两个新键:狗"和"Rottweiler".

Notice I added two new keys: "Dogs" and "Rottweiler".

希望有帮助.

这篇关于Highcharts异步多级向下钻取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！