HighCharts - 用於多級別（3至4級別）的餅圖明細

Question

我使用高圖來繪製餅圖，並且要求是當我們單擊圖表的一部分時，需要向下鑽取到其他級別。

我需要深入到3到4級。

例如，如果我創建服裝圖表，當我點擊它會鑽到包含服裝類如圖 - 男士服裝，服飾的婦女，兒童服裝等。（2級）

這是工作的罰款1 （http://www.highcharts.com/demo/pie-drilldown/）

但我想再深入一級深入鑽取，就好像現在我點擊女性服裝，它會深入到女性服裝類別 - 包包，太陽鏡，手錶，收益等

任何人都可以幫我：（

Answer 1

不知道這是否對您有幫助。但我認爲使用服務器端的數據來實現這一點會更容易。如下所示，您可以更改餅圖的數據，這可以將您帶到任何級別。你只需要保持一個確定，以確定你在哪個級別。

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 
    series: [{ 
     data: myInitialDataArray, // make sure each data point has an id 
     point: { 
      events: { 
       click: function() { 
        $.post('/get/data/url/' + this.id, function(data) { 
         // you may need to format your data here 
         // Set the level here. e.g Level 1, 2 or 3 and then depending on that you can also change the url also or any other logic 
         chart.series[0].setData(data); 
        }); 
       } 
      } 
     } 
    }] 
}); 

Answer 2

我想你已經得到了答案。仍然可能對其他人有所幫助。

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/data.js"></script> 
<script src="http://code.highcharts.com/modules/drilldown.js"></script> 

<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div> 
<button id="pie">reset</button> 

的JavaScript部分

var chart; 
$(document).ready(function() { /*begin chart render*/ 
var colors = Highcharts.getOptions().colors, 
    categories = ['The Americas', 'Asia Pacific', 'Europe & Africa'], 
    //name = 'Sectors', 
    data = [{ 
     name: 'A-1', 
     y: 55, 
     color: colors[0], 
     drilldown: { 
      //begin alcohol 
      name: 'A-1', 
      categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
      data: [122252, 3516, 4036, 3557, 4021, 3624, 3847], 
      color: colors[0], 
      data: [{ 
       y: 33.06, 
       name: 'A', 
       drilldown: { 
        name: 'Budweiser', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [10838, 11349, 11894, 11846, 11878, 11662, 11652, 11438, 11833, 12252], 
        color: colors[0] 
       }}, 
      { 
       y: 10.85, 
       name: 'B', 
       drilldown: { 
        name: 'Heinekein', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [2266, 2396, 2431, 2380, 2357, 3516], 
        color: colors[0] 
       }}, 
      { 
       y: 7.35, 
       name: 'C', 
       drilldown: { 
        name: 'Jack Daniels', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [1583, 1580, 1612, 4036], 
        color: colors[0] 
       }}, 
      { 
       y: 2.41, 
       name: 'D', 
       drilldown: { 
        name: 'Johnnie Walker', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [1649, 1654, 1724, 3557], 
        color: colors[0] 
       }}, 
      { 
       y: 2.41, 
       name: 'E', 
       drilldown: { 
        name: 'Moet & Chandon', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [2470, 2445, 2524, 2861, 2991, 3257, 3739, 3951, 3754, 4021], 
        color: colors[0] 
       }}, 
      { 
       y: 2.41, 
       name: 'F', 
       drilldown: { 
        name: 'Smirnoff', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [2594, 2723, 5600, 2975, 3097, 3032, 3379, 3590, 7350, 3624], 
        color: colors[0] 
       }}, 
      { 
       y: 2.41, 
       name: 'G', 
       drilldown: { 
        name: 'Corona', 
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
        data: [3847], 
        color: colors[0] 
       }}], 
     }}, 
    { 
     name: 'B-1', 
     y: 11.94, 
     color: colors[2], 
     drilldown: { 
      name: 'B', 
      categories: ['A-2', 'B-2', 'C-2'], 
      color: colors[2], 
      data: [{ 
       y: 33.06, 
       name: 'A', 
       drilldown: { 
        name: 'A', 
        categories: ['A', 'B'], 
        data: [4444, 6666], 
        color: colors[3] 
       }, 
       }, 
      { 
       name: 'B', 
       y: 10.85, 
       drilldown: { 
        name: 'B', 
        categories: ['A', 'B'], 
        data: [22222, 6005], 
        color: colors[3] 
       }, 
       }, 
      { 
       name: 'C', 
       y: 7.35, 
       drilldown: { 
        name: 'C', 
        categories: ['2011'], 
        data: [3605], 
        color: colors[3] 
       }}], 
     }}, 
    ]; 



window.chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'pie', 
     /* changes bar size */ 
     pointPadding: -0.3, 
     borderWidth: 0, 
     pointWidth: 10, 
     shadow: false, 
     backgroundColor: '#e2dfd3' 
    }, 
    title: { 
     text: 'Pie Test' 
    }, 
    subtitle: { 
     text: 'Pie Chart Triple Breakdown' 
    }, 
    xAxis: { 
     categories: categories 
    }, 
    yAxis: { 
     title: { 
      text: 'Total Brand Value', 
      categories: categories 
     } 
    }, 
    //drilldown plot 
    plotOptions: { 
     pie: { 
      cursor: 'pointer', 
      allowPointSelect: true, 
      pointPadding: -0.3, 
      borderWidth: 0, 
      pointWidth: 15, 
      shadow: false, 
      point: { 
       events: { 
        click: function() { 
         var chart = this.series.chart, 
          drilldown = this.drilldown; 
         if (drilldown) { // drill down 
          chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); 
         } 
        } 
       } 
      }, 
      dataLabels: { 
       enabled: true, 
       color: '#000', 
       //label colors 
       connectorColor: '#000', 
       // connector label colors 
       formatter: function() { 
        return '<b>' + this.point.name + '</b>: ' + this.y; 

       } 
      } 
     } 
    }, 
    //formatting over hover tooltip 
    tooltip: { 
     formatter: function() { 
      var point = this.point, 
       s = point.name + ':<b>' + this.y + '% market share</b><br/>'; 
      if (point.drilldown) { 
       s = point.name + ':<b>' + this.y + '222</b><br/>'; 
       s += 'Click to view ' + point.name + ' versions'; 
      } else { 
       s = point.name + ':<b>' + this.y + '333</b><br/>'; 
       s += 'Click to return to browser brands'; 
      } 
      return s; 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: name, 
     data: data, 
     /* changes bar size */ 
     pointPadding: -0.3, 
     borderWidth: 0, 
     pointWidth: 15, 
     shadow: false, 
     color: 'black' //Sectors icon 
     }], 
    exporting: { 
     enabled: false 
    } 
}, function(chart){ 

    chart.upper = []; 

    var up = false; 

    chart.setChart = function(name, categories, data, color) { 
     //chart.xAxis[0].setCategories(categories); 
     if (name === true && chart.upper.length) { 
      chart.series[0].remove(); 
      chart.addSeries(chart.upper.pop()); 

      if(chart.upper.length === 0) { 
       $("#pie").hide('up'); 

       up = false; 
      } 
      return true; 
     } 

     if (up === false) { 
      $("#pie").show().bind('click', function(){ chart.setChart(true); }); 
      up = true; 
     } 

     chart.upper.push(chart.series[0].options); 
     chart.series[0].remove(); 
     chart.addSeries({ 
      name: name, 
      data: data, 
      color: color || 'white' 
      }); 
     } 
    }); 
});