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

在此示例中，您定義了一個click事件，該事件使用point的id值（this.id）來執行URL的Ajax發布。 然后，您可以使用帖子中的數據重新綁定圖表系列。

請注意，每次使用setData函數更新圖表時，每個數據點都需要具有id值才能繼續進行深入分析。

希望這可以幫助！

Answer 2

試試psd3餅圖庫
演示 - https://pshivale.github.io/psd3
來源 - https://github.com/pshivale/psd3
它支持多級餅圖，圓環圖和旭日形圖。 它還支持通過雙擊向下鑽取餅圖。