ネスト/マルチレベル/ドリルダウンのパイチャートをJavascriptで表示しますか？

Question

私は、スライスをクリックして「そのスライスを構成するものを表示する」ことをユーザーに許可するjavascriptで円グラフを作成しようとしています。あなたがmint.comを使ったことがあるなら、あなたが費用の円グラフを見て、 "Automobile"スライスをクリックすると、スライスがガス、メンテナンス、

これをさらに進めていくために、大量のデータを扱うため、スライスをクリックしたときに新しいデータをフェッチ（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); 
        }); 
       } 
      } 
     } 
    }] 
}); 

、あなたはURLにAjaxのポストを実行するためのポイントのid値（this.id）を使用してクリックイベントを定義します。次に、あなたのポストのデータを使用してチャートシリーズを再バインドします。

setData関数を使用してグラフを更新するたびに、ドリルダウンを続行するために各データポイントにid値が必要であることに注意してください。

希望すると便利です。 https://pshivale.github.io/psd3
ソース - -

Answer 2

が
デモPSD3円グラフライブラリを試してみてくださいhttps://github.com/pshivale/psd3
これは、マルチレベルの円グラフ、ドーナツグラフとサンバーストチャートをサポートしています。また、スライスをダブルクリックすることでパイスライスをドリルダウンすることもできます。