JQuery flot饼图大小错误

Question

---

我正在使用JQuery flot来创建一些很棒的饼图，结果正是我要找的东西，exext的一件事。馅饼本身的大小根据数据量的不同而不同。我会后下面藏汉代码为小提琴链接到工作示例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的价格比较小。虽然占位符是相同的大小。任何想法为什么以及如何发生这种情况

Answer 1

它看起来像它与饼图上的标签呈现在哪里。您可以尝试更改标签的位置，使其位于饼图内。

看看这个网站：http://www.flotcharts.org/flot/examples/series-pie/它显示了两种不同标签样式之间的区别。

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

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 
     } 

我创建了一个fiddle给你看看。

有 “标签样式＃1” 和提出的海军报网站上的 “标签样式＃2” 之间的区别：