Question

我正在寻求帮助实现使用Highcharts异步下钻的多级深入分析。我能够将练习降低到第一级，但我需要深入到另一个级别。以下是我用作参考的示例。在下面的例子中，我可以深入了解动物＆＃34;，＃34;水果＆＃34; ＆安培; ＆＃34;汽车＆＃34 ;.我也可以点击羊并且能够向下钻取但是我如何添加系列，这将在我点击绵羊后显示。谢谢你的帮助..

$('#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: []
    }
});

}）;

Answer 1

由于他们的示例代码引用了点的名称，因此应该在＆＃34; drilldown＆＃34;中创建向下钻取的值。使用数据的父名称作为字典键的字典。以下是钻入狗的示例：

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);
}

注意我添加了两个新密钥：＆＃34; Dogs＆＃34;和＆＃34;罗威纳＆＃34;。

希望有所帮助。

Answer 2

$(function () {

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

                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2, true],
                                        ['Sheep', 3, true]
                                    ],
                                     keys: ['name','y','drilldown']
                                },
                                'Sheep': {
                                    name: 'Sheep',
                                    data: [
                                        ['Red', 2],
                                        ['White', 1]

                                    ]
                                },
                                'Cows': {
                                    name: 'Cows',
                                    data: [
                                        ['Red', 1],
                                        ['White', 1]

                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5, true],
                                        ['Oranges', 7, true],
                                        ['Bananas', 2]
                                    ],
                                    keys: ['name','y','drilldown']
                                },
                                'Apples': {
                                    name: 'Apples',
                                    data: [
                                        ['Red', 3],
                                        ['Green', 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: []
        }
    });
});

Highcharts async multi level drill down

2 个答案: