2

「列チャート」を掘り下げました。& 今度は「円グラフ」をドリルダウンしたい

円グラフを表示するための私のコードは次のとおりです。

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

                }]
});
});

});

これでドリル​​ダウンするにはどうすればよいですか?

ドリルダウン後、円グラフのみが表示されます。では、上記のコードでそれを行うにはどうすればよいですか?

少なくとも、円グラフでドリルダウンするための参照リンクをいくつか教えてください。そうすれば、それを優先できます。

4

3 に答える 3

4

円グラフをドリルダウンするには、2 つの方法があります。

  • 同じチャートデータを変更できます
  • クリックした前のグラフへの参照を使用して、新しい円グラフを描画できます。

ここに私のJsfiddleリンクがあります。円グラフをドリルダウンして縦棒グラフを表示しました。
円グラフをドリルダウンするには、クリックしたスライスが必要です。

そのために必要なのは、

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

注: 同じチャートをドリルダウンして
いる場合. 別のチャート タイプにドリルダウンしている場合は、そのチャート タイプのプロット オプションも必要になります。
これが役立つことを願っています。
乾杯 ：）

于 2012-12-11T12:24:58.883 に答える
3 
<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>
于 2013-01-15T07:03:06.453 に答える
0

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
        }]
});
    });
于 2013-01-15T06:43:55.713 に答える