Jquery Flot 饼图显示数据值而不是百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5673870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Flot pie charts show data value instead of percentage
提问by Ruud van de Beeten
I can't figure out how to get flot.pie to change the data shown in the labels from a percentage of the "raw data" to the actual data. In my example i've created a pie chart with the numbers of read/unread messages.
我不知道如何让 flot.pie 将标签中显示的数据从“原始数据”的百分比更改为实际数据。在我的示例中，我创建了一个饼图，其中包含已读/未读消息的数量。
Number of read messages: 50. Number of unread messages: 150.
已读消息数：50。未读消息数：150。
The created pie shows the percentage of read messages as 25%. On this spot i want to show the actual 50 messages. See image below:
创建的饼图显示已读消息的百分比为 25%。在这一点上，我想显示实际的 50 条消息。见下图：
The code i used to create the pie:
我用来创建馅饼的代码：
var data = [
{ label: "Read", data: 50, color: '#614E43' },
{ label: "Unread", data: 150, color: '#F5912D' }
];
And:
和：
$(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
}
});
});
Is this possible?
这可能吗？
With the answer of @Ryley I came to a dirty solution. When I output the series.data the values "1,150" and "1,50" were returned. I came up with the idea to substract the first 2 characters of the returned value and display the substracted value.
通过@Ryley 的回答，我找到了一个肮脏的解决方案。当我输出 series.data 时，返回值“1,150”和“1,50”。我想出了减去返回值的前 2 个字符并显示减去后的值的想法。
String(str).substring(2, str.lenght)
This is the pie chart I created with this solution:
这是我用这个解决方案创建的饼图：
This is not the best solution, but it works for me. if someone knows a better solution....
这不是最好的解决方案，但它对我有用。如果有人知道更好的解决方案....
回答by Ruud van de Beeten
I found the answer to the question. The data object is a multi-dimensional array. To get the acual data use the following code:
我找到了问题的答案。数据对象是一个多维数组。要获取 acual 数据，请使用以下代码：
$(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/>' + series.data[0][1] + '</div>';
},
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
Notice the code " series.data[0][1] " to extract the data.
注意代码“ series.data[0][1] ”来提取数据。
回答by Ryley
This somewhat depends on what you mean with "On this spot i want to show the actual 50 messages".
Let's assume that you want to have a div popup when they mouseover the Read or Unread section and then show the messages in there.
这在某种程度上取决于您的意思是“在此我想显示实际的 50 条消息”。
假设您希望在鼠标悬停在“已读”或“未读”部分时显示 div 弹出窗口，然后在其中显示消息。
First step is to make your pie chart interactive. You need to add the gridoption like so:
第一步是使您的饼图具有交互性。您需要grid像这样添加选项：
legend: {
show: true;
},
grid: {
hoverable: true,
clickable: true
}
Next, you have to bind the click/hover events to functions that retrieve your messages and display them:
接下来，您必须将单击/悬停事件绑定到检索消息并显示它们的函数：
$("#placeholder").bind('plothover',function(e,pos,obj){
});
$("#placeholder").bind('plotclick',function(e,pos,obj){
if (obj.series.label == 'Read'){
//show your read messages
} else {
//show your unread messages
}
});
That's it!
就是这样！
Now, if what you meant is simply that you want to display all the messages directly in the pie all the time, you just need to change your formatter to reference a global variable that contains your messages.
现在，如果您的意思只是想一直直接在饼图中显示所有消息，则只需更改格式化程序以引用包含消息的全局变量。
回答by Diogenes Chepe Ardines Salazar
You could use:
你可以使用：
formatter: function (label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>';
},
回答by FoneyOp
Try something like ProtoVis. There are also a few good answers on SO with links to other free useful data visualization libraries. If you have some $ fusion chartsis also quite good.
尝试像ProtoVis这样的东西。在 SO 上也有一些很好的答案，其中包含指向其他免费有用数据可视化库的链接。如果你有一些 $ fusion 图表也相当不错。
