Question

我有h：m格式的flot饼图数据。

通常如果我以下列格式提供数据，它会正确显示饼图

var data = [
    {label: "data1", data:10},
    {label: "data2", data: 20},

];

但如果不是int / double我直接用 hh：mm 格式提供数据我什么都没得到

var data = [
    {label: "data1", data:10:30},
    {label: "data2", data: 20:20},

];

我的问题没有将h：m转换为普通的int / double值有没有其他方法在我的flot饼图中显示h：m？

如果没有那么转换会更好吗？

Answer 1

Flot无法自动取消您的时间值，您必须将它们转换为例如分钟。然后，您可以使用labelFormatter函数以原始格式显示饼图切片的值。像这样：

$(function () {
    var data = [{
        label: "data1",
        data: '10:30'
    }, {
        label: "data2",
        data: '20:20'
    },

    ];

    for (var i = 0; i < data.length; i++) {
        var hours = parseInt(data[i].data.split(':')[0]);
        var minutes = parseInt(data[i].data.split(':')[1]);
        data[i].data = hours * 60 + minutes;
    }

    var plot = $.plot("#placeholder", data, {
        series: {
            pie: {
                show: true,
                label: {
                    radius: 0.5,
                    formatter: labelFormatter
                }
            }
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        legend: {
            show: false
        }
    });

    function labelFormatter(label, series) {
        var value = Math.floor(series.data[0][1] / 60) + ':' + (series.data[0][1] % 60);
        return "<div style='font-size:10pt; text-align:center; padding:2px; color:black;'>" + label + "<br/>" + Math.round(series.percent) + "%<br />" + value + "</div>";

    }

});

有关完整示例，请参阅此fiddle。

使用hh：mm格式的饼图数据

1 个答案: