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

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....

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

4 个解决方案

#1

I found the answer to the question. The data object is a multi-dimensional array. To get the acual data use the following code:

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

    $(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]”来提取数据。

#2

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条消息”。假设你想鼠标悬停在Read或Unread部分，然后在那里显示消息时，你想要一个div弹出窗口。

First step is to make your pie chart interactive. You need to add the grid option like so:

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

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.

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

#3

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

#4

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 charts is also quite good.

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