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

最新推荐文章于 2021-05-11 19:20:53 发布

totogogo

最新推荐文章于 2021-05-11 19:20:53 发布

阅读量1.7k

点赞数

分类专栏： WEB 2.0 文章标签： google firefox chrome ie visualization function

本文链接：https://blog.csdn.net/totogogo/article/details/6702726

版权

WEB 2.0 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

totogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用google chart在IE里的问题（在FIREFOX, CHROME没有问题）

Problem 1: 如果draw google chart在style=”display:none”的里，那么纵坐标的y scale label就会看不见Problem 2: 如果googlechart结合jquery的slideToggle来达到展开收埋的效果会有问题
复制链接

扫一扫

专栏目录