javascript - Highcharts 使用 Dom 控制基本 DrillDown

Question

我在 This Post 找到了上一个关于如何使用 DOM 进行向下钻取和向上钻取的问题的答案。 。但我在 Here 找到了一个简单易懂的 highcharts.js 版本正如您所看到的，代码更容易理解。

现在您可以让我知道如何在 This Demo 中启用按钮进行向下钻取和向上钻取吗？ ？

$(function () {
    var chart;
    function drawChart1() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Basic drilldown'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                type: 'category'
            },
            legend: {
                enabled: false
            },
             credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Things',
                colorByPoint: true,
                data: [{
                    name: 'Animals',
                    y: 5,
                    drilldown: 'animals'
                }, {
                    name: 'Fruits',
                    y: 2,
                    drilldown: 'fruits'
                }]
            }],
            drilldown: {
                series: [{
                    id: 'animals',
                    data: [
                        ['Cats', 4],
                        ['Dogs', 2],
                        ['Cows', 1],
                        ['Sheep', 2],
                        ['Pigs', 1]
                    ]
                }, {
                    id: 'fruits',
                    data: [
                        ['Apples', 4],
                        ['Oranges', 2]
                    ]
                }]
            }
        });

        $("#animals").on("click", function () {
            $(this).addClass('disabled');
            $("#overview").removeClass('disabled');
        });
        $("#fruits").on("click", function () {
            $(this).addClass('disabled');
            $("#overview").removeClass('disabled');
        });
        $("#overview").on("click", function () {
            $(this).addClass('disabled');
            $("#animals").removeClass('disabled');
            $("#fruits").removeClass('disabled');
        });
    }
    drawChart1();

});

Answer 1

嗯，这不是 API 的一部分，但正如您所注意到的，要向上钻取，您需要调用 chart.drillUp()。对于向下钻取，它有点不同，取决于您想要向下钻取的位置。

简单来说调用方法:chart.xAxis[0].drilldownCategory(category_index);，参见:http://jsfiddle.net/vncnwd66/2/

但是，有一个限制:您无法从 A 的第二层向下钻取到 B 的第二层。首先，您需要向上钻取，然后向下钻取到另一个第二层。