绘制折线图时 IE8 崩溃 - 所有其他浏览器都可以工作答案

【问题标题】：IE8 Crashes When Drawing LineChart -- All Other Browsers Work绘制折线图时 IE8 崩溃 - 所有其他浏览器都可以工作
【发布时间】：2014-06-23 16:14:09
【问题描述】：

我们一直在使用Google Charts API 构建应用程序。在我们支持的大多数浏览器中一切正常，但 IE8 引起了问题。从技术上讲，浏览器不会崩溃，图表只是需要很长时间才能呈现，浏览器认为它正在崩溃并警告脚本应该停止。当我们允许脚本完成时，渲染图表需要分钟才能完全渲染。在 Chrome、FF 和 IE9 中，图表会立即呈现。浏览器之间的这种巨大差异可能表明 Google 端存在问题，但考虑到在谷歌上搜索该问题并没有通过类似问题出现太多，我不禁认为我们端的处理不正确。

以下是我们用于生成图表的方法，所有内容都挂在chart.draw 调用中。

function drawChart(data) {
    var options = {
        title: 'Occupancy and Volume History',
        isStacked: true,
        colors: ['#0066FF', '#53CF53', '#E0440E', '#E6693E', '#FF9900', '#009933'],
        hAxis: { format: 'MM/dd/yyyy hh:mm:SS a',
            gridlines: { color: 'transparent' }
        },
        vAxis: { viewWindow: { min: Number('0'),
            max: Number('0.96')
        },
            gridlines: { color: 'transparent'}
        },
        pointSize: 5,
        series: { 4: { pointSize: 0 },
            5: { pointSize: 0 }
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
    google.visualization.events.addListener(chart, 'error', function (e) {
        console.log(e.message);
    });
    chart.draw(data, options);
}

正在检索和处理数据，如下所示：

$.post(<path to data>,
    function (data) {
        // Format date to actual date object
        $.each(data.rows, function (i, row) {
            data.rows[i].c[0].v = new Date(row.c[0].v);
        });

        drawChart(data);
});

可以在here 找到在服务器端构建并传递给上述方法的数据样本。在数据被传递到方法之前，日期字符串被转换为 JavaScript Date 对象。所有其他数据保持原样。

在我们的 HTML 中，我们阻止了 IE 兼容模式，并且我们已经验证浏览器尊重这一点并在 IE8 模式下呈现，我们使用的是 HTML5 文档类型（即：DOCTYPE html），我们正在使用裸 html 元素来启动文档。

如果需要任何进一步的信息，我很乐意提供。

编辑：使用的数据以前格式不正确。 sample data 的链接已修改为链接到新的更正格式，但仍然存在相同的问题。

编辑 2：修复数据结构后不再使用 arrayToDataTable。

编辑 3：在调用 drawChart() 之前添加了数据检索和处理。

【问题讨论】：

一个巨大的问题......你为什么还要为 IE8 开发？许多在线资源表明（平均而言）只有 5% 的人仍在使用 IE8……您或您的客户对 IE8 有特定要求吗？
不幸的是，我们的客户端在大多数机器上仍然使用 IE8。
您可以尝试 HTML5shiv 修复，看看您是否看到任何更好的渲染结果... - code.google.com/p/html5shiv
@BigChris，我们在页面上实际上没有任何特定于 HTML5 的内容（尽管有 HTML5 文档类型），但谢谢！我们实际上认为我们可能已经追踪到了这个问题......我们生成的数据格式错误：developers.google.com/chart/interactive/docs/…
arrayToDataTable 函数不适用于您的数据结构，您需要使用标准的DataTable 构造函数：var gdata = new google.visualization.DataTable(data);。

标签： javascript internet-explorer-8 google-visualization

【解决方案1】：

首先，您不应该使用 Date 对象提供的字符串到日期的转换。这个函数在不同浏览器之间是不一致的，即使是同一个浏览器，不同区域的用户对日期字符串的解析也会不同。举个例子：

new Date('06-08-2014')

对于美国用户可能会解析为 2014 年 6 月 8 日，但对于欧洲用户可能会解析为 2014 年 8 月 6 日。

您应该适当地手动解析您的日期字符串。对于这个示例，我将假设您的日期字符串格式为'M/d/yyyy hh:mm:ss A'。像这样解析日期字符串：

$.each(data.rows, function (i, row) {
    var match = row.c[0].v.match(/(\d{1,2})\/(\d{1,2})\/(\d{4}) (\d{2}):(\d{2}):(\d{2}) (..)/);
    var year = parseInt(match[3], 10);
    var month = parseInt(match[1], 10) - 1; // adjust for javascript's 0-indexed months
    var day = parseInt(match[2], 10);
    var hours = parseInt(match[4], 10) + (match[7] == 'AM' ? 0 : 12); // adjust hours for AM/PM
    var minutes = parseInt(match[5], 10);
    var seconds = parseInt(match[6], 10);

    row.c[0].v = new Date(year, month, day, hours, minutes, seconds);
});

当您将data 传递给drawChart 时，它仍然是一个原始对象，而不是一个正确的DataTable。您需要先将其转换为 DataTable 对象，然后再将其传递给 drawChart 或 drawChart 函数：

var dataTable = new google.visualization.DataTable(data);

此外，您应该调整服务器代码以将数字输出为数字，而不是字符串（例如，"0" 应该是 0）。

示例：http://jsfiddle.net/asgallant/a2uNj/

【讨论】：