Flot 图在 Firefox 或 Internet Explorer 中不起作用，只有 Chrome答案

【问题标题】：Flot graph not working in Firefox or Internet Explorer, only ChromeFlot 图在 Firefox 或 Internet Explorer 中不起作用，只有 Chrome
【发布时间】：2013-09-27 12:54:08
【问题描述】：

我正在使用Flot jQuery plugin 在我的网站上呈现图表。它在最新版本的 Chrome 中完美运行，但在 Firefox 和 Internet Explorer 中似乎失败了。我使用的是 Firefox 21 版和 Internet Explorer 10 版。以下是相关代码：

$(document).ready(function() {

    var currentURL = window.location;

    // This will hold our plot data
    var playersPlots = [];
    var pingPlots = [];

    // Make an AJAX request to get the server stats
    $.get(currentURL + '/stats.json', function(data) {
        $.each(data.stats, function(index, value) {
            playersPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.players]);
            pingPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.ping]);
        });

        $.plot($('#server-stats'), [{label: 'Players', data: playersPlots}, {label: 'Ping (ms)', data: pingPlots}], {
            xaxis: {
                mode: 'time',
                timeformat: '%I:%M',
                'tickSize': [3, "hour"]
            }
        });
    }, 'json');

});

图形在 Chrome 下（正确）呈现如下：

但是在 Firefox 和 Internet Explorer 下是这样的：

有没有人遇到过这个问题并知道原因？

还值得一提的是，Firefox 和 IE 都没有控制台错误，它们都在发出 AJAX 请求并取回我通过查看开发人员工具的网络选项卡确认的正确数据。

编辑：另外值得一提的是，如果我像这样对值进行硬编码：

$.plot($('#server-stats'), [{label: 'Players', data: [[10, 10], [20, 20]]}, {label: 'Ping (ms)', data: [[30, 30], [40, 40]]}], {

它适用于 Firefox、IE 和 Chrome。

【问题讨论】：

Flot fails to render charts on certain browsers的可能重复

标签： javascript jquery google-chrome firefox flot

【解决方案1】：

这是因为我的日期格式而发生的。默认情况下 MySQL 返回一个日期时间为YYYY-MM-DD HH:MM:SS，而它需要是YYYY-MM-DDTHH:MM:SS

【讨论】：

这是正确的； Chrome 在日期解析方面更加宽容，并且可以处理其他浏览器通常会拒绝的事情。

【解决方案2】：

我也遇到过此类问题，但在我的情况下，日期时间已经是这样的“YYYY-MM-DD HH:MM:SS”格式。

“2015-02-26T00:00:00”

但在那之后它在 Firefox 和 IE 上显示不正常。

然后我找到了解决方案，只需将“.000Z”添加到日期中，它就为我找到了。

     for (var i = 0; i < data.length; i++) {
            res.push([new Date(data[i].MONTH + '.000Z'), data[i].USEDUNIT]);
        }


min: new Date('2015-02-26T00:00:00.000Z'),
max: new Date('2015-03-04T00:00:00.000Z'),

对于 min max 我也使用了 moment.js () ，因为 getDate() 返回 5 但我需要 05 。

var minDate = new Date(moment().format('YYYY-MM-DD') + 'T00:00:00.000Z');
minDate.setDate(minDate.getDate() - 7);

var maxDate = new Date(moment().format('YYYY-MM-DD') + 'T00:00:00.000Z');
maxDate.setDate(maxDate.getDate() - 1);

【讨论】：