使用google chart在IE里的问题（在FIREFOX, CHROME没有问题）

来源：互联网发布：世界各国高收入数据集编辑：程序博客网时间：2024/05/11 09:51

Problem 1: 如果draw google chart在style=”display:none”的<div>里，那么纵坐标的y scale label就会看不见

Problem 2: 如果googlechart结合jquery的slideToggle来达到展开收埋的效果会有问题

IE执行下列的代码就会看到上面2个问题

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script src="../js/jquery.min.js" type="text/javascript"></script>    <script type="text/javascript">          google.load("visualization", "1", {packages:["corechart"]});      google.setOnLoadCallback(drawChart);      function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('string', 'Year');        data.addColumn('number', 'Sales');        data.addColumn('number', 'Expenses');        data.addRows(4);        data.setValue(0, 0, '2004');        data.setValue(0, 1, 1000);        data.setValue(0, 2, 400);        data.setValue(1, 0, '2005');        data.setValue(1, 1, 1170);        data.setValue(1, 2, 460);        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',                          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}                         });      }      $(document).ready(function(){          $("#show").click(function () {          $("#chart_div").slideToggle("fade");              });      $("#hide").click(function () {          $("#chart_div").slideToggle("fade");                  });      });    </script>  </head>  <body><button id="show">Show Chart</button> <button id="hide">Hide Chart</button>    <div id="chart_div" style="display:none"></div>  </body></html>

解决第一个问题的办法是，不能先用style="display:none"使得<div>不见，然后再draw google chart，而应该是去掉style="display:none"，先draw google chart，然后再用javascript来使得<div>不见。

解决第二个问题的方法是，不要使用slideToggle，使用show/hide则没有问题。

还有一点需要注意的是：google.setOnLoadCallback可以相当于jquery的$(document).ready(function(){});，你只要把写在$(document).ready(function(){}里的代码搬去setOnLoadCallback也可。

下面是在IE里没有问题的代码：

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script src="../js/jquery.min.js" type="text/javascript"></script>    <script type="text/javascript">    google.load("visualization", "1", {packages:["corechart"]});    google.setOnLoadCallback(function() {        // Place init code here instead of $(document).ready()    drawChart();    $("#chart_div").hide(); //先draw google chart，再hide div        $("#show").click(function () {        $("#chart_div").show();                });        $("#hide").click(function () {        $("#chart_div").hide();                });     });    function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('string', 'Year');        data.addColumn('number', 'Sales');        data.addColumn('number', 'Expenses');        data.addRows(2);        data.setValue(0, 0, '2004');        data.setValue(0, 1, 1000);        data.setValue(0, 2, 400);        data.setValue(1, 0, '2005');        data.setValue(1, 1, 1170);        data.setValue(1, 2, 460);        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',                          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}                         });      }     </script>  </head>  <body><button id="show">Show Chart</button><button id="hide">Hide Chart</button>    <div id="chart_div">aaa</div>  </body></html>