分两步向下钻取，在 Highcharts 中进行多项选择

Question

我是这个社区的新手，所以我会尽力而为。我正在尝试在饼图中使用 Highcharts 执行向下钻取。事实上，我想开发一些代码，使我能够：

第一次点击 select 多个图表（或饼图的切片）
第二次单击饼图向下钻取以查看向下钻取系列。

这是我的代码（我只能在钻取完成后执行多个 select离子，而不是之前）：

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'

    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function (event) {
                        this.slice(null);
                    }
                }
            }
        }
    },
    series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                    name: 'Animals',
                    y: 5,
                    drilldown: 'animals'
                }, {
                    name: 'Fruits',
                    y: 2,
                    drilldown: 'fruits'
                }, {
                    name: 'Cars',
                    y: 4,
                    drilldown: 'cars'
                }]
        }],
    drilldown: {
        series: [{
                id: 'animals',
                data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                ]
            }, {
                id: 'fruits',
                data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                ]
            }, {
                id: 'cars',
                data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                ]
            }]
        }
    });
});

感谢小伙伴们的帮助！

Answer 1

使用 async drilldown (API) 可以添加更多系列作为下钻。检查点的状态，如果它已被选中，则这意味着单击了选定的点并应执行向下钻取。

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions && e.point.selected) {
                        var chart = this,
                            points = chart.getSelectedPoints(),
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                    'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                    'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            };

                        Highcharts.each(points, function (p) {
                            chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
                        });
                        chart.applyDrilldown();
                    }

                },
                drillup: function (e) {
                    var chart = this,
                        points = [];
                    setTimeout(function () {
                        points = chart.getSelectedPoints();

                        Highcharts.each(points, function (p) {
                            // unselect points from previous drilldown
                            p.selected = false;
                            p.setState('', true);
                        });
                    }, 0);
                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

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

        series: [{
            allowPointSelect: true,
            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: []
        }
    });
});

JSFiddle：http://jsfiddle.net/7hmn093d/2/

分两步向下钻取，在 Highcharts 中进行多项选择

Drilldown in two steps, multiple choice in Highcharts

jquery

json

highcharts

drilldown