IE8崩潰時繪製LineChart - 所有其他瀏覽器工作

我們一直在使用Google Charts API構建應用程序。一切在我們支持的大多數瀏覽器中都能正常工作，但是IE8會引發問題。從技術上講，瀏覽器不會崩潰，圖表只是需要很長時間才能呈現瀏覽器認爲它正在崩潰並警告腳本應該停止。當我們允許腳本完成時，渲染圖表已經花費分鐘完全呈現。在Chrome，FF和IE9中，圖表即時呈現。瀏覽器之間的這種巨大差異可能表明谷歌的一個問題，但鑑於谷歌搜索這個問題並沒有出現類似的問題，我不禁認爲我們正在處理一些錯誤的事情。IE8崩潰時繪製LineChart - 所有其他瀏覽器工作

以下是我們用來生成圖表的方法，並且所有內容都掛在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()之前添加檢索和處理數據。

來源

2014-06-23 Dan

一個巨大的問題......你爲什麼還在爲IE8開發呢？一些在線資源指出（平均而言）只有5％仍在使用IE8 ...您或您的客戶是否對IE8有特定要求？ – Kinnectus

不幸的是，我們的客戶仍然在大多數機器上使用IE8。 – Dan

您可以嘗試HTML5shiv修補程序，看看您是否看到任何更好的渲染結果... - https://code.google.com/p/html5shiv/ – Kinnectus

首先，您不應該使用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，它仍然是一個原始對象，而不是一個適當的數據表。您需要用它傳遞給drawChart之前或在drawChart功能將其轉換爲一個DataTable對象：

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

此外，你應該調整你的服務器代碼輸出的數字作爲數字，而不是字符串（例如，"0"應是0）。

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

來源

2014-06-25 01:11:55 asgallant

IE8崩潰時繪製LineChart - 所有其他瀏覽器工作

回答

相關問題