我有关于如何使用DOM进行向下钻取和向上钻取的上一个问题的答案,请访问This Post。但是我在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();

});

最佳答案

好吧,这不是API的一部分,但是您已经注意到,要深入研究,您需要调用chart.drillUp()。要向下钻取,则有所不同,具体取决于您要在何处进行向下钻取。

简短的调用方法:chart.xAxis[0].drilldownCategory(category_index);,请参见:http://jsfiddle.net/vncnwd66/2/

但是,有一个限制:您不能从A的第二级向下钻取到B的第二级。首先,您需要向上钻取,然后向下钻取到另一个第二级。

09-28 05:18