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

前端之家收集整理的这篇文章主要介绍了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 '<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
        }
    });
});

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

原文链接:https://www.f2er.com/jquery/183485.html

猜你在找的jQuery相关文章