3

私はいくつかの素晴らしい円グラフを作成するために JQuery flot を使用していますが、結果はまさに私が探しているものです。パイ自体のサイズは、その中のデータの量によって異なります。以下のコードと、実際の例へのフィドル リンクを投稿しますhttp://jsfiddle.net/2dHVY/1/

HTML

<div id="canvas"></div>

Javascript

for (var i = 0; i < 3; i++) {
 createPie(i);
}


function createPie(i) {
  var a;
  var b;
  if (i == 0){a=33; b=66}
  if (i == 1){a=3; b=2}    
  if (i == 2){a=1; b=1}


     $("#canvas").append("<div  id='placeholder"+i+"' class='placeholder'></div>");
    var data = [{
        label: "a",
        data: a,
        color: "#299a0b"
    }, {
        label: "b",
        data: b,
        color: "#f79621"
    },];

    var placeholder = $("#placeholder"+i);
    placeholder.unbind();
        $.plot(placeholder, data, {
series: {
  pie: {
    show: true,
    radius: 1,
    label: {
      show: true,
      radius: 1,
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }
    }
  }
},
grid: {
  hoverable: false,
  clickable: true
},

legend: {
  show: false
}
});

}

function labelFormatter(label, series) {
  return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" +       label + "<br/>" + Math.round(series.percent) + "%</div>";
}

問題が何であるかはわかりませんが、50/50 の値の比率を取得したものは 60/40 の値よりも小さく、67/33 の値よりも小さいため、flot がパイをレンダリングする方法だと思います。ただし、プレースホルダーは同じサイズです。なぜ、どのようにこれが起こっているのかについてのアイデア

4

1 に答える 1

4

円グラフのラベルがレンダリングされる場所に関係しているようです。ラベルが円グラフ内に収まるように、ラベルの位置を変更してみてください。

このサイトを見てください: http://www.flotcharts.org/flot/examples/series-pie/は、2 つの異なるラベル スタイルの違いを示しています。

labelJavaScriptのプロパティを次のように変更する必要があります。

label: {
      show: true,
      radius: 1,
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }

に：

label: {
      show: true,
      radius: 3/4,   //This sets where the labels position themselves on the pie chart
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }

チェックアウトするためのフィドルを作成しました。

Flot の Web サイトに示されているように、「Label Styles #1」と「Label Styles #2」には違いがあります。

ラベル スタイル #1

ラベル スタイル #2

于 2013-10-03T12:32:46.917 に答える