jquery flot饼图显示数据值而不是百分比

我不知道如何让flot.pie将标签中显示的数据从“原始数据”的百分比更改为实际数据。在我的例子中，我创建了一个包含已读/未读消息数量的饼图。jquery flot饼图显示数据值而不是百分比

读邮件数：50 数未读消息：150

创建的饼图显示已读邮件为25％的比例。在这一点上，我想显示实际的50条消息。见下图：

enter image description here

我用来创建饼图代码：

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)

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

enter image description here

这是不是最好的解决方案，但它为我工作。如果有人知道更好的解决方案....

来源

2011-04-15 Ruud van de Beeten

我不能格式化工作，调试器甚至不回落到该行... – 2014-10-21 11:07:53

我找到了问题的答案。数据对象是一个多维数组。要获得相应的数据，请使用以下代码：

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

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

来源

2011-04-18 08:51:21

这是行不通的。。。 – 2013-05-22 15:37:01

当时它为我做了。 – 2013-05-23 13:25:29

在我的图表中只显示一部分 – 2014-01-06 07:30:07

尝试像ProtoVis。与其他免费的有用数据可视化库的链接也有一些好的答案。如果你有一些$ fusion charts也相当不错。

来源

2011-04-15 15:11:24 FoneyOp

你是误导。 Flot最近发布了一个新版本。至于是否很难/不具备特征，那是你的意见。 – Ryley 2011-04-15 15:22:22

errrr，我的错误，我正在考虑http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_jtml5_from_designing_with/ – FoneyOp 2011-04-15 15:25:14

Flot仍然积极开发，有一个非常活跃的谷歌组/邮件列表，并且最近在GitHub上创建了一个镜像。由于它是一个文本文件，它们在文档上丢失了点数，但任何可以阅读的人都可以理解它。 – Kai 2011-04-15 15:25:20

这在某种程度上取决于你的意思，“在这一点上我想显示实际的50条消息”。
让我们假设你想要在弹出“读取”或“未读”部分时弹出一个div，然后在其中显示消息。

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

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

接下来，你必须绑定点击/悬停事件，至检索您的邮件功能并显示出来：

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

这就是它！现在

，如果你的意思很简单，就是要直接在饼图显示所有消息的时候，你只需要改变你的格式化程序引用包含邮件的全局变量。

来源

2011-04-15 15:21:37 Ryley

感谢您的回答。当我调用下面的代码'alert（obj.series.data）;'对于标签为'Read'的数据输出为“1,50”。你能告诉我为什么它不是“50”吗？ – 2011-04-18 06:50:40

@Ruud，flot正在后台对您的数据进行一些操作......并且不清楚究竟是什么。正如你想的那样，它被埋在一个数组中，而不是很容易获得...... – Ryley 2011-04-18 15:13:54

你可以使用：

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>'; 
},

来源

2014-03-12 16:40:39

jquery flot饼图显示数据值而不是百分比

回答

相关问题