Comment faire un Drilldown dans un Piechart de Highchart ?

Question

J'ai exploré le "tableau à colonnes". Maintenant je veux descendre le "Pie chart".

mon code pour afficher le graphique en secteurs est le suivant,

$(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

                }]
});
});

});

Comment puis-je faire un forage dans ce cas ?

Après le forage, il devrait montrer le graphique circulaire seulement. Que dois-je faire pour cela dans le code abve ?

Donnez-moi au moins quelques liens de référence pour l'exploration dans le graphique circulaire afin que je puisse le préférer.

Answer 1

Il existe deux méthodes permettant d'approfondir un graphique circulaire.

• Soit vous pouvez modifier les mêmes données graphiques
• Vous pouvez dessiner un nouveau graphique circulaire en utilisant la référence cliquée au graphique précédent. précédent.

aquí est mon lien Jsfiddle. J'ai creusé le graphique circulaire pour montrer un graphique en colonnes.
Pour approfondir un graphique circulaire, ce dont vous avez besoin est la tranche cliquée.

pour faire cela, ce dont vous avez besoin est,

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

Note : Si vous percez dans la même carte
Vous aurez également besoin des options de tracé pour ce type de graphique, si vous effectuez un forage vers un autre type de graphique.
J'espère que cela vous aidera.
Merci :)

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 , vérifiez ce code. c'est juste un échantillon

$(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
        }]
});
    });