jQuery Flot饼图显示数据值而不是百分比 [英] Jquery Flot pie charts show data value instead of percentage

问题描述

我不知道如何获取flot.pie来将标签中显示的数据从原始数据"的百分比更改为实际数据.在我的示例中，我创建了一个饼图，其中包含已读/未读消息的数量.

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.

已读消息数:50. 未读邮件数:150.

Number of read messages: 50. Number of unread messages: 150.

创建的饼图显示已读消息的百分比为25％.在这一点上，我想显示实际的50条消息.参见下图:

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:

我用来创建饼图的代码:

The code i used to create the pie:

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个字符并显示减去后的值的想法.

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.

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

推荐答案

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

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

请注意代码"series.data [0] [1]"以提取数据.

Notice the code " series.data[0][1] " to extract the data.

这篇关于jQuery Flot饼图显示数据值而不是百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！