我正在使用JQuery flot创建一些很棒的饼图,结果正是我在寻找的东西,仅是一件事。饼图本身的大小取决于其中的数据量。我将在下面的代码以及指向工作示例的小提琴链接中发布http://jsfiddle.net/2dHVY/1/
的HTML
<div id="canvas"></div>
Java脚本
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的那个值,然后小于67/33的那个值。所有占位符的大小相同。任何想法为什么以及如何发生
看起来与饼图上标签的显示位置有关。您可以尝试更改标签的位置,以便它们位于饼图中。
请访问此网站:http : //www.flotcharts.org/flot/examples/series-pie/,它向您展示了2种不同标签样式之间的区别。
您需要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
}
我创建了一个小提琴供您查看。
Flot网站上显示的“标签样式1”和“标签样式2”之间是有区别的:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句