24

我不知道如何让 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)

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

在此处输入图像描述

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

4

4 回答 4

44

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

    $(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-18T08:51:21.453 回答
2

这在某种程度上取决于您对“在这个地方我想显示实际的 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-15T15:21:37.787 回答
1

你可以使用：

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-12T16:40:39.117 回答
0

尝试类似ProtoVis的东西。在 SO 上也有一些很好的答案，其中包含指向其他免费有用的数据可视化库的链接。如果你有一些$ fusion图表也是相当不错的。

于 2011-04-15T15:11:24.383 回答