[英]jquery mouse events masked by img in IE8 - all other platforms/browsers work fine
[英]IE8 Crashes When Drawing LineChart — All Other Browsers Work
我們一直在使用Google Charts API構建應用程序。 一切都可以在我們支持的大多數瀏覽器中運行,但是IE8引起了問題。 從技術上講,瀏覽器不會崩潰,圖表僅花費很長時間渲染,以致瀏覽器認為它已崩潰,並警告應該停止腳本。 當我們允許腳本完成時,渲染圖表花費了幾分鍾才能完全渲染。 在Chrome,FF和IE9中,圖表會立即呈現。 瀏覽器之間的巨大差異可能表明Google出現了問題,但是考慮到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);
});
在此處可以找到在服務器端構建並傳遞給上述方法的數據示例。 在將數據傳遞到方法之前,將日期字符串轉換為JavaScript Date對象。 所有其他數據保持不變。
在我們的HTML中,我們正在阻止IE兼容模式,並且我們已驗證瀏覽器是否遵守此規范,並且正在以IE8模式進行呈現,我們正在使用HTML5 doctype(即DOCTYPE html
),並且正在使用裸露的html
元素以啟動文檔。
如果需要任何進一步的信息,我很樂意提供。
編輯:以前使用的數據格式錯誤。 鏈接到示例數據已被修改為鏈接到新的更正格式,仍然存在相同的問題。
編輯2:修復數據結構后,不再使用arrayToDataTable。
編輯3:在調用drawChart()
之前添加了對數據的檢索和處理。
首先,您不應使用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
)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.