您的位置：首页 > 编程语言 > Go语言

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

2011-08-19 17:55 471 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航