hh:mm 格式的 flot 饼图数据

Question

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

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

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

];

但是如果我直接使用 hh:mm 格式而不是 int/double 提供数据，我什么也得不到

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 格式的 flot 饼图数据

flot pie chart data with hh:mm format

javascript

flot

pie-chart