我有一个包含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.
解决方法:
这可能是Date.parse函数在Safari和Firefox上无法正常工作的问题吗？我认为识别的日期格式是依赖于实现的,并且在不同的浏览器中可能不一致.
有关详细信息,请参见this question