Javascript hh:mm格式的flot饼图数据

我有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？

---

如果否，那么哪种转换更适合此操作？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>";

    }

});

$（函数（）{
风险值数据=[{
标签：“数据1”，
数据：“10:30”
}, {
标签：“数据2”，
数据：“20:20”
},
];
对于（变量i=0；i“+Math.round（series.percent）+”%
“+value+”；
}
});

---

完整示例见此。

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>";

    }

});

$（函数（）{
风险值数据=[{
标签：“数据1”，
数据：“10:30”
}, {
标签：“数据2”，
数据：“20:20”
},
];
对于（变量i=0；i“+Math.round（series.percent）+”%
“+value+”；
}
});

---

有关完整示例，请参见此。

10:30

不是有效值。。。你不能那样使用

：

。只是一个猜测，但如果您尝试一个字符串：

“10:30”

谢谢。但只有当我将其转换为double时，它才会出现。但我正在寻找是否有其他方法可以在不转换主格式（h:m）的情况下使用它作为字符串来正确显示百分比。我也需要这个百分比。也许可以尝试一个日期值，但如果Flot还没有达到版本1，那么我不会指望它做你需要的一切<代码>新日期（2000,0,0,10,30）。。我想如果你想要百分位数的话，它需要一个小数点。这意味着你要我把所有的时间都转换成同一年，同一个月，同一天。这也是个好主意。在这种情况下，我已经有了时间跨度的刻度。也许我也可以使用它。但是仍然在寻找更好的

10:30

不是一个有效的值。。。你不能那样使用

：

。只是一个猜测，但如果您尝试一个字符串：

“10:30”

谢谢。但只有当我将其转换为double时，它才会出现。但我正在寻找是否有其他方法可以在不转换主格式（h:m）的情况下使用它作为字符串来正确显示百分比。我也需要这个百分比。也许可以尝试一个日期值，但如果Flot还没有达到版本1，那么我不会指望它做你需要的一切<代码>新日期（2000,0,0,10,30）。。我想如果你想要百分位数的话，它需要一个小数点。这意味着你要我把所有的时间都转换成同一年，同一个月，同一天。这也是个好主意。在这种情况下，我已经有了时间跨度的刻度。也许我也可以使用它。但是仍然在寻找更好的东西谢谢亲爱的，但是我已经用记号值解决了这个问题。谢谢亲爱的，但是我已经用记号值解决了这个问题。