Google圖表上的數字在IE上沒有加載（IE10前）

我的任務是解決用戶（IEIE9）抱怨的Google圖表問題。Google圖表上的數字在IE上沒有加載（IE10前）

基本上，我在前端的「標籤」上有一個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在它們之間交換。

當您點擊時間序列「標籤」時，在大多數瀏覽器中，所有功能都可以正常工作，因爲您可以在x軸和y軸上看到數字;但是，在IE8和IE9中，軸上的數字不會加載。唯一的例外是body標籤更改爲點時間序列標籤的onLoad，即：

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

這樣做，使IE瀏覽器加載的數字。任何人都可以向我解釋IE8和IE9中的哪些不兼容性阻止Google Chart正確加載（即發生了什麼！？），以及如何糾正它？

來源

2013-09-24 Belinda-Jane Netan

問題是你正在繪製隱藏的div內的圖表。 Visualization 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-24 15:03:12 asgallant

在我提供的小例子中，這很好用，謝謝asgallant！ –

在我提供的小例子中，這很好用，謝謝asgallant！實際的現場網站有多個谷歌圖表，並且 - 根據我的理解，通過您的解釋 - 儘管我認爲將您的代碼添加到每個Google圖表都會起作用，但最終我只能將其添加到第一個實例中，並且然後我在後面的實例中放入一個'空白'addListener。儘管是一種變通方法，但我們只有時間/預算，而且它的確有用。再次感謝asgallant！ –

對於多個圖表，只有在所有圖表完成繪圖後，才應該初始化標籤。我將修改上面的示例，讓您瞭解如何做到這一點。 – asgallant

Google圖表上的數字在IE上沒有加載（IE10前）

回答

相關問題