如何在Highchart的Piechart中鑽取？

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

<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 2

有兩種方法可以深入分析餅圖。

• 要麼你可以修改同一圖表數據
• 您可以使用點擊refrence以前 圖表繪製新的餅圖。

here是我的Jsfiddle鏈接。 我已經鑽好餅圖來顯示柱狀圖。
要深入瞭解餅圖，您需要的是點擊切片。

要做到這一點，你需要的是，

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

注意：如果您在同一圖表中鑽下來..
您還需要情節的選項爲圖表類型，如果你是深入到不同的圖表類型。
我希望這可以幫助。
歡呼:)

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