3

NVD3 円グラフにパーセンテージを表示しようとしましたが、その方法がわかりません...このようなものを探しています

まず、円グラフの各部分にグラフ オプションまたは何かを表示する方法はありますか? はいの場合、正確な値の代わりにパーセンテージを表示するオプションはありますか?

ありがとう、そして週末を楽しんでください！

4

2 に答える 2

6

サンプルのNVD3 Pie Chartを機能させることができたと思います。

私が知る限り唯一の方法は、pieChart.js. hereから NVD3 ソースを取得し、/ src / models /開いて pieChart.js編集を追加します。

tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' % </p>'
      }

または、ここに NVD3 でホストされたpieChart.jsへのリンクがあります。編集line 19して次のようにします。'<p>' + y + '</p>'

html ページにスクリプトを追加して、ロード時に継承された pieChart 設定を無視するようにしてください。nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

アップデート：

チャートに渡すデータはそのままレンダリングされますので、パーセンテージを計算してチャートに渡します。円グラフのスライス サイズは、グラフに送信したデータに基づいて計算されます。お知らせするだけで、すでに知っているかどうかは無視してください。

更新: 2013 年 7 月 30 日

pieChart.js ファイルをいじらずにツールチップを編集する正しい方法を見つけました。

var chart = nv.models.pieChart().x(function(d) {
    return d.key;
}).y(function(d) {
    return d.daily[0].sales;
}).showLabels(true).values(function(d) {
    return d;
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
});

答えを更新してほしいだけです。これで、2 つの方法がわかりました。

お役に立てば幸いです。

于 2013-05-31T15:30:19.777 に答える