javascript - 如何在Highchart的Piechart中做Drilldown？

Question

我已经钻取了“柱形图”。＆现在我想向下钻取“饼图”

我显示饼图的代码如下，

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',

            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
                        }
                    }
                }
            },
            series: 
                [{
                   type:'pie',
                    data: model.mixchart

                }]
});
});

});

我如何在此进行下钻？

向下钻取后它应该只显示饼图。那么在上面的代码中我应该怎么做呢？

至少给我一些在饼图中向下钻取的引用链接，以便我可以更喜欢那个。

Answer 1

有两种方法可以向下钻取饼图。

• 您可以修改相同的图表数据
• 您可以使用单击的对上一个的引用来绘制新的饼图图表。

here是我的 Jsfiddle 链接。我已向下钻取饼图以显示柱形图。
要向下钻取饼图，您需要的是单击的切片。

要做到这一点，你需要的是，

plotOptions: {
         pie: {
             point: {
                 events: {
                     click: function() {
                        //logic for drill down goes here                       
                     }
                 }
             }
         }
     },

注意:如果您在同一图表中向下钻取...
如果您向下钻取到不同的图表类型，您还需要该图表类型的绘图选项。
希望对您有所帮助。
干杯:)