Jquery Flot饼图显示数据值而不是百分比

我无法弄清楚如何让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 '
' + label + '
' + Math.round(series.percent) + '%
'; }, threshold: 0.1 } } }, legend: { show: false } }); }); 

这可能吗？

在@Ryley的回答中，我找到了一个肮脏的解决方案。 当我输出series.data时，返回值“1,150”和“1,50”。 我想出了减去返回值的前2个字符并显示减去的值的想法。

 String(str).substring(2, str.lenght) 

这是我用这个解决方案创建的饼图：

这不是最好的解决方案，但它对我有用。 如果有人知道更好的解决方案….

Answer 1

我找到了问题的答案。 数据对象是多维数组。 要获取实际数据，请使用以下代码：

  $(function () { $.plot($("#placeholder"), data, { series: { pie: { show: true, radius: 1, label: { show: true, radius: 2 / 3, formatter: function (label, series) { return '
' + label + '
' + series.data[0][1] + '
'; }, threshold: 0.1 } } }, legend: { show: false } }); }); 

注意代码“series.data [0] [1]”来提取数据。

Answer 2

这在某种程度上取决于你的意思“在这个地方我想显示实际的50条消息”。
假设你想鼠标hover在Read或Unread部分，然后在那里显示消息时，你想要一个div弹出窗口。

第一步是使您的饼图互动。 您需要添加grid选项，如下所示：

 legend: { show: true; }, grid: { hoverable: true, clickable: true } 

接下来，您必须将单击/hover事件绑定到检索邮件并显示它们的函数：

 $("#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 } }); 

而已！

---

现在，如果您的意思仅仅是想要直接在饼图中显示所有消息，您只需要更改格式化程序以引用包含消息的全局变量。

Answer 3

你可以使用：

 formatter: function (label, series) { return '
'+Math.round(series.percent)+"%
" + series.data[0][1] +'
'; }, 

Answer 4

尝试像ProtoVis这样的东西 。 SO上还有一些很好的答案，可以链接到其他免费的有用数据可视化库。 如果你有一些$ fusion图表也相当不错。