0

我的任务是修复用户（IE8 和 IE9）抱怨的 Google Chart 问题。

基本上，我在前端的“标签”上有一个谷歌图表。我制作了前端的静态实例（将 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 隐藏和 onClick 在它们之间进行交换。

当您单击 TIME SERIES “选项卡”时，大多数浏览器上的一切都按预期工作，因为您会在 x 轴和 y 轴上看到数字；但是，在 IE8 和 IE9 中，轴上的数字不会加载。唯一的例外是将 body 标记更改为指向 TIME SERIES 选项卡 onLoad，即：

    <body style="margin:20px;" onLoad="ShowSection('TIME');">

这样做会使 IE 加载数字。谁能向我解释 IE8 和 IE9 中的哪些不兼容导致 Google Chart 无法正确加载（即这里发生了什么！？），以及如何纠正它？

4

1 回答 1

0

问题是您在隐藏的 div 内绘制图表。可视化 API 要求所有图表都绘制在可见的 div 中，以便准确检索维度信息。在您的代码中解决此问题的简单方法是从您的页面中删除“onload”事件处理程序，并从图表的“就绪”事件处理程序中调用它：

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);

或者，如果您使用的是Dashboard，您可以触发仪表板的“就绪”事件：

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);
于 2013-09-24T15:03:12.310 回答