jQuery flot 饼图尺寸问题

Question

jQuery flot 饼图尺寸问题

3

我正在使用JQuery flot创建一些精美的饼图，结果正是我所期望的，只有一个问题。根据数据量不同，饼图本身的大小也会不同。下面我会贴出代码以及工作示例的fiddle链接 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>";
}

我不知道问题出在哪里，但我猜测可能是flot渲染饼图的方式导致了这个问题，因为值比例为50/50的饼图比60/40的小，而60/40的又比67/33的小，尽管占位符的大小是相同的。你有什么想法，为什么会发生这种情况以及如何解决呢？

- user1593846

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 97ldave · Accepted Answer

看起来与饼图标签的渲染位置有关。您可以尝试更改标签的位置，使其在饼图内部。

请参考此网站：http://www.flotcharts.org/flot/examples/series-pie/，了解两种不同标签样式之间的区别。

您需要像这样更改JavaScript中的label属性：

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

to:

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

我为您创建了一个示例，您可以查看这里。

在Flot网站上，"标签样式 #1"和"标签样式 #2"之间有所不同： Label Styles #1