在Javascript中嵌套/多級/下鑽餅圖？

Question

我正在嘗試使用javascript創建餅圖，以允許用戶單擊切片並「查看構成該切片的內容」。如果你曾經使用過mint.com，你會明白我的意思 - 比如說你正在查看費用餅圖，然後點擊「汽車」切片，然後你會看到切片展開成一張新的天然氣，維護圖表，等等

爲了更進一步，我正在處理大量的數據，所以當單擊切片時能夠獲取（ajax）新數據也是一個有用的選項（儘管我沒有它可能會逃脫）。

也許「嵌套」，「多層次」和「深入」不是正確的術語，因爲我一整天都在搜索，似乎無法找到解決方案。

有沒有人知道這個庫？提前致謝！

Answer 1

我已經使用HighCharts點擊事件實現了類似的向下鑽取系統。下面是粗略的語法：

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/by/id/' + this.id, function(data) { 
         // you may need to format your data here 
         chart.series[0].setData(data); 
        }); 
       } 
      } 
     } 
    }] 
}); 

在這個例子中，你定義使用值的點的ID（this.id）來執行一個Ajax張貼到URL點擊事件。然後，您可以使用帖子中的數據重新綁定圖表系列。

請注意，每次使用setData函數更新圖表時，每個數據點需要有一個id值才能繼續深入鑽取。

希望這會有所幫助！

Answer 2

嘗試PSD3餅圖庫
演示 - https://pshivale.github.io/psd3
來源 - https://github.com/pshivale/psd3
它支持多層次的餅圖，圓環圖和旭日圖表。它還支持雙擊它來挖掘餅圖片。