我有一个包含2个系列的简单折线图,x轴是日期,y轴是整数。说明这一点的代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<style type="text/css">
#overview-plot24 {
width: 94%;
margin-left: 20px;
height: 220px;
}
</style>
<script type="text/javascript">
$(function() {
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
tickLength: 5,
reserveSpace: true,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
legend: {
show: false
},
series: {
lineWidth: 1,
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true
}
};
var plot2 = $.plot(
'#overview-plot24', [
{
label: "Alerts",
color: "#FC8200",
data: [
[Date.parse("2013-03-19 15:00"), 9650],
[Date.parse("2013-03-19 16:00"), 33124],
[Date.parse("2013-03-19 17:00"), 27806],
[Date.parse("2013-03-19 18:00"), 24143],
[Date.parse("2013-03-19 19:00"), 7573],
]},
{
label: "Scores",
color: "#8000FF",
data: [
[Date.parse("2013-03-19 15:00"), 26407],
[Date.parse("2013-03-19 16:00"), 93973],
[Date.parse("2013-03-19 17:00"), 77760],
[Date.parse("2013-03-19 18:00"), 68715],
[Date.parse("2013-03-19 19:00"), 20383],
]
}
],
plotOptions
);
});
</script>
</head>
<body>
<div id="overview-plot24"></div>
</body>
</html>
这在Chrome和Opera中正确呈现,但该系列无法在Safari和Firefox上呈现。 Chrome呈现正确。 Safari和Firefox呈现错误。
这很麻烦,因为flot网页上的示例在所有浏览器上都能正确呈现,我很难看到我的代码在哪里有所不同!
对于有兴趣直接运行代码的人来说,包含所有内容的zip存档是available。
答案 0 :(得分:5)
问题是不在Flot 或其渲染中,而是JavaScript中的 ,特别是您用于日期的格式。
您用于日期的格式无效(请参阅渲染图表中的水平轴),因为IE和Chrome可以识别格式2013-03-19 19:00
,但不能识别FF和Safari。
您确定每个浏览器都会读取的唯一格式是YYYY-MM-DDTHH:mm:ss.sssZ
,因此在您的情况下,您应该将代码中的字符串更改为2013-03-19T19:00
。有关其他详细信息,请查看SO上的this和this帖子(或this little tutorial关于日期)。
答案 1 :(得分:3)
这可能是Date.parse函数在Safari和Firefox上无法正常工作的问题吗?我认为识别的日期格式是依赖于实现的,并且可能在不同的浏览器中不一致。
有关详细信息,请参阅this question
答案 2 :(得分:1)
我遇到了同样的问题,虽然我修复了日期格式但它并没有解决问题。该问题原来是a bug in Flot,如果您为x轴上的时间值指定min
和max
选项,则不会对数据进行图表处理。
删除min
和max
后,它就像所有浏览器中的魅力一样。