5

ユーザーがスライスをクリックして「そのスライスを構成するものを表示」できるようにするJavaScriptを使用して円グラフを作成しようとしています。mint.comを使用したことがある場合は、私が何を意味するのかがわかります。たとえば、経費の円グラフを表示していて、[自動車]スライスをクリックすると、スライスがガス、メンテナンス、等

これをさらに一歩進めるために、私は大量のデータを扱っているので、スライスがクリックされたときに新しいデータをフェッチ（ajax）できることも便利なオプションです（おそらくそれなしで逃げることができますが） ）。

おそらく、「ネスト」、「マルチレベル」、「ドリルダウン」は、私が一日中検索していて解決策を見つけることができないため、適切な用語ではありません。

このためのライブラリを知っている人はいますか？前もって感謝します！

4

2 に答える 2

2

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）を使用してURLへのAjax投稿を実行するクリックイベントを定義します。次に、投稿のデータを使用して、一連のグラフを再バインドします。

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

お役に立てれば！

于 2013-02-15T17:33:28.783 に答える
1

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

于 2015-08-11T17:28:56.043 に答える