3

我有一个包含 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存档。

4

3 回答 3

5

问题不在于 Flot或其渲染，而在于 JavaScript，特别是您用于日期的格式。

您用于日期的格式无效（请参见渲染图表中的水平轴），因为2013-03-19 19:00IE 和 Chrome 可识别该格式，但 FF 和 Safari 无法识别该格式。

您确定每个浏览器都会读取的唯一格式是YYYY-MM-DDTHH:mm:ss.sssZ，在您的情况下，您应该将代码中的字符串更改为2013-03-19T19:00. 看看这个和这个关于 SO 的帖子了解其他细节（或这个关于日期的小教程）。

于 2013-03-20T12:58:23.913 回答
3

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

有关更多详细信息，请参阅此问题

于 2013-03-20T12:59:20.560 回答
1

我遇到了同样的问题，虽然我修复了日期格式，但它并没有解决问题。这个问题原来是Flot 中的一个错误，如果您在 x 轴上指定时间值min和选项，它将不会绘制数据图表。max

一旦我删除了它min，max它在所有浏览器中就像一个魅力。

于 2013-12-05T15:37:31.967 回答