我无法弄清楚如何使flot.pie将标签中显示的数据从“原始数据”的百分比更改为实际数据。在我的例子中,我创建了一个带有读/未读消息数的饼图。
读取消息数:50。
未读消息数:150。
创建的饼图显示读取邮件的百分比为25%。在这个地方我想显示实际的50条消息。见下图:
我用来创建饼图的代码:
var data = [ { label: "Read",data: 50,color: '#614E43' },{ label: "Unread",data: 150,color: '#F5912D' } ];
和:
$(function () { $.plot($("#placeholder"),data,{ series: { pie: { show: true,radius: 1,label: { show: true,radius: 2 / 3,formatter: function (label,series) { return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>'; },threshold: 0.1 } } },legend: { show: false } }); });
这可能吗?
有了@Ryley的答案,我来到了一个肮脏的解决方案。当我输出series.data时,返回值“1,150”和“1,50”。我想出了减去返回值的前2个字符并显示减法值的想法。
String(str).substring(2,str.lenght)
这是我用此解决方案创建的饼图:
解决方法
我找到了这个问题的答案。数据对象是一个多维数组。要获取acual数据使用以下代码:
$(function () { $.plot($("#placeholder"),{ series: { pie: { show: true,label: { show: true,series) { return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>'; },threshold: 0.1 } } },legend: { show: false } }); });