Javascript Flot无法在某些浏览器上呈现图表

Javascript Flot无法在某些浏览器上呈现图表,javascript,charts,flot,Javascript,Charts,Flot,我有一个简单的折线图,它包含两个系列,x轴是日期,y轴是整数。说明这一点的代码如下所示: <!DOCTYPE html> <html> <head> <script type="text/javascript" language="javascript" src="flot/jquery.js"></script> <script type="text/javascript" language="javascrip

我有一个简单的折线图,它包含两个系列,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>

#概述-24{
宽度:94%;
左边距:20px;
高度:220px;
}
$(函数(){
变量plotOptions={
//选项在这里
xaxis:{
模式:“时间”,
长度:5,
reserveSpace:没错,
自动缩放边距:0.01
},
亚克斯:{
最低:0
},
图例:{
节目:假
},
系列:{
线宽:1,
阴影大小:0
},
网格:{
悬停:是的,
可点击:正确
}
};
变量plot2=$.plot(
“#概述-plot24”[
{
标签:“警报”,
颜色:“FC8200”,
数据:[
[日期解析(“2013-03-19 15:00”),9650],
[解析日期(“2013-03-19 16:00”),33124],
[日期解析(“2013-03-19 17:00”),27806],
[日期解析(“2013-03-19 18:00”),24143],
[日期解析(“2013-03-19:00”),7573],
]},
{
标签:“分数”,
颜色:“8000FF”,
数据:[
[日期解析(“2013-03-19 15:00”),26407],
[日期解析(“2013-03-19 16:00”),93973],
[日期解析(“2013-03-19 17:00”),77760],
[日期解析(“2013-03-19 18:00”),68715],
[解析日期(“2013-03-19:00”),20383],
]
}
],
绘图选项
);
});
这在Chrome和Opera中正确呈现,但在Safari和Firefox上无法呈现该系列。 Chrome渲染正确。 Safari和Firefox的渲染不正确

这是令人困惑的,因为flot网页上的示例在所有浏览器上都能正确呈现,我很难看出我的代码有什么不同


对于那些对直接运行代码感兴趣的人来说,包含所需内容的zip归档文件是。

问题不在于Flot或其呈现,而在于JavaScript,特别是日期格式

用于日期的格式无效(请参见渲染图表中的横轴),因为IE和Chrome可以识别该格式,但FF和Safari不能识别该格式


您确定每个浏览器都会读取的唯一格式是
YYYY-MM-DDTHH:MM:ss.sssZ
,因此在您的情况下,您应该将代码中的字符串更改为
2013-03-19T19:00
。查看并在SO上发布其他详细信息(或关于日期)。

这可能是Date.parse函数在Safari和Firefox上无法正常工作的问题吗?我认为识别的日期格式取决于实现,并且在不同的浏览器中可能不一致


有关更多详细信息,请参见,我也遇到了同样的问题,尽管我已修复了日期格式,但它并没有解决问题。问题是,如果在x轴上为时间值指定
min
max
选项,它将不会绘制数据


一旦我删除了
min
max
,它在所有浏览器中都像一个魔咒一样工作。

这就是问题所在。更改日期格式可使其正确呈现。奇怪的是,Javascript console.Date.parse中没有错误,如果它不能理解日期,它只返回'NaN',而不是抛出错误,我猜Flot也不会为NaN值抛出错误。感谢您提供额外的链接。日期格式确实是个问题。这不是问题所在,但请注意,列表的最后一项后面有一个逗号。现代浏览器并不在意,但这类事情(特别是在对象文本中)会在旧浏览器(如IE7)中导致错误。这对我来说不是问题,因为我很幸运能够以IE9或更高版本为目标。