如何在 Highchart 的饼图中进行钻取？

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                       
                     }
                 }
             }
         }
     },

注意：如果您在同一个图表中向下钻取..
如果您要深入了解不同的图表类型，您还需要该图表类型的绘图选项。
我希望这会有所帮助。
干杯:)

Answer 2

<script type="text/javascript">

         var chart;
         $(document).ready(function() {
            chart = new Highcharts.Chart({
               chart: {
                  renderTo: 'container',
                  backgroundColor: '#e2dfd3',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,

               },
               //credits for highcharts
               credits: {
                       enabled: false
                  },
               title: {
                  text: 'Country/Region',
               },
               tooltip: {
                  formatter: function() {
                     return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                  }
               },
               plotOptions: {
                  pie: {
                     borderWidth: 0, // border color control
                     size: '80%',
                     allowPointSelect: true,
                     cursor: 'pointer',
                     point: {
                        events: {
                           click: function() {
                              var drilldown = this.drilldown;
                              if (drilldown) { // drill down
                                 setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                              } else { // restore
                                 setChart(name, categories, data);
                              }
                           }
                        },

                     dataLabels: {
                        enabled: true,
                        color: '#000', //label colors
                        connectorColor: '#000', // connector label colors
                        formatter: function() {
                           return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                        }
                     }
                  }
               },
                series: [{
                  type: 'pie',

                  name: 'Country/Region',
                  data: [
                     {
                        name:'United States',
                        y: 45.0,
                     },{
                        name:'Germany', 
                        y: 26.8
                     },{
                        name: 'France',    
                        y: 12.8,
                        sliced: true,
                        selected: true,
                        /*drilldown: {
                            name: ['Disney'],
                            categories: ['2001', '2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011'],
                            data: [32591, 29256, 28036, 27113, 26441, 27848, 29210, 29251, 28447, 28731],
                            color: colors[12] 
                         },*/




                     },{
                        name:'Japan',
                        y: 8.5
                     },{
                        name:'United Kingdom',
                        y: 8.5
                     },{
                        name:'Switzerland',
                        y: 8.5
                     },{
                        name: 'South Korea',
                        y: 6.2
                     },{
                        name:'Italy',
                        y: 6.2
                     },{
                        name:'Canada',
                        y: 0.7
                     },{
                        name:'Finland',
                        y: 0.7
                     },{
                        name:'Netherlands',
                        y: 0.7
                     },{
                        name:'Spain',
                        y: 0.7
                     },{
                        name:'Sweden',
                        y: 0.7
                     }
                  ]
               }]
               }/**/
            });
         });

      </script>

Answer 3

Rahul，看看这段代码。它只是样本

$(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: { renderTo: 'container', type: 'bar'},
            title: { text: '' },
            xAxis: {
                categories: model.buckets,

              },
        yAxis: {          
                title: { text: '' }
        },

        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                           var range=this.category[0];
                           if (step==0) { // drill down
                                $.ajax({
                                    type: 'POST',
                                    url: root + "analytics/standard_prospects_prospectaging/?json",
                                    data: { range: range, what: 'drill' },
                                    success: function (o) {
                                        setChart("", o.buckets, o.pcounts, '#e48801');
                                        rebind(o.aging);
                                        step = step + 1;
                                    },
                                    dataType: "json"
                                });

                            } else { // restore
                                console.log(this);
                                $.ajax({
                                    type: 'POST',
                                    url: root + "analytics/standard_prospects_prospectaging/?json",
                                    data: { oppname: range },
                                    success: function (o) {
                                        window.location.href = "/prospects/index/" + o.oppid;
                                    },
                                    dataType: "json"
                                });

                            }
                        }
                    }
                },

            }
        },
    series: [{
                name: 'Prospect Aging',color:'#e48801',
                data: model.pcounts
        }]
});
    });