我的任务是解决用户(IE8和IE9)抱怨的Google图表问题。
基本上,我在前端的"选项卡"上有一个谷歌图表。 我为我们的前端制作了一个静态实例(将 HTML 保存在浏览器上),并将问题提炼为以下 HTML:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
function ShowSection(strSectionName){
document.getElementById('TAB_TIME').style.backgroundColor='white';
document.getElementById('TAB_RESPONSES').style.backgroundColor='white';
document.getElementById('SECTION_TIME').style.display='none';
document.getElementById('SECTION_RESPONSES').style.display='none';
document.getElementById('TAB_'+ strSectionName).style.backgroundColor='lightblue';
document.getElementById('SECTION_'+ strSectionName).style.display='table-row';
}
</script>
</head>
<body style="margin:20px;" onLoad="ShowSection('RESPONSES');">
<table style="table-layout:fixed;width:1390px;" border="1" cellpadding="6" cellspacing="0">
<tr>
<td id="TAB_TIME" onClick="ShowSection('TIME');">TIME SERIES</td>
<td id="TAB_RESPONSES" onClick="ShowSection('RESPONSES');">RESPONSES</td>
</tr>
<tr id="SECTION_RESPONSES">
<td>Hello world</td>
</tr>
<tr id="SECTION_TIME" >
<td align="left" valign="top">
<div style="border:1px solid black;" id="CHART_SALES_OVER_TIME_WEEKLY"></div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Dummy data', 'Sales'],
['1', 1],['2', 1],['3', 3],['4', 0]
]);
var options = {
height: 600,
width: 1370
};
var chart = new google.visualization.ColumnChart(document.getElementById('CHART_SALES_OVER_TIME_WEEKLY'));
chart.draw(data, options);
}
</script>
</td>
</tr>
</table>
</body>
</html>
所以,如果你启动它,你会看到它是两个选项卡(使用表格)的表示,通过onload隐藏's,onClick在它们之间交换。
当您单击时间序列"选项卡"时,大多数浏览器上的一切都按预期工作,因为您会在 x 轴和 y 轴上看到数字;但是,在 IE8 和 IE9 中,轴上的数字不会加载。 唯一的例外是更改正文标签以指向 TIME SERIES 选项卡 onLoad,即:
<body style="margin:20px;" onLoad="ShowSection('TIME');">
这样做会使IE加载数字。 谁能向我解释IE8和IE9中的哪些不兼容性阻止了Google图表正确加载(即这里发生了什么!?),以及如何纠正它?
问题是你在隐藏的div 中绘制图表。 可视化 API 要求在可见div 中绘制所有图表,以便准确检索维度信息。 在代码中解决此问题的简单方法是从页面中删除"onload"事件处理程序,然后从图表的"ready"事件处理程序调用它:
var chart = new google.visualization.ColumnChart(document.getElementById('CHART_SALES_OVER_TIME_WEEKLY'));
google.visualization.events.addListener(chart, 'ready', function () {
ShowSection('RESPONSES');
});
chart.draw(data, options);
使用多个图表时,您希望仅在所有图表都完成绘制后初始化选项卡,因此您需要跟踪哪些图表已准备就绪:
var chartsReady = [];
function setupReadyEvent(chart, index) {
chartsReady[index] = false;
google.visualization.events.addListener(chart, 'ready', function () {
chartsReady[index] = true;
var allReady = true;
for (var i = 0; i < chartsReady.length; i++) {
allReady = allReady && chartsReady[i];
}
if (allReady) {
ShowSection('RESPONSES');
}
});
}
setupReadyEvent(chart1, 0);
setupReadyEvent(chart2, 1);
setupReadyEvent(chart3, 2);
或者,如果您使用的是仪表板,则可以触发仪表板的"就绪"事件:
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
google.visualization.events.addListener(dashboard, 'ready', function () {
ShowSection('RESPONSES');
});
// bind charts and controls in Dashboard, eg:
dashboard.bind([control], [chart]);
dashboard.draw(data, options);