我正在使用Google Charts API使用arrayToDataTable例程绘制几个ComboCharts。一切都加载正常,但如果我试图重绘任何图表,则会发生错误(仅在IE8中 )。
当我使用JQuery的$(window).resize触发重绘图表时,我首先注意到了这一点,但即使我只是执行两个背对背的chart.draw函数,问题仍然存在。
任何想法......
脚本错误(重复多次):
format+en,default+en,ui+en,corechart+en.I.js
以下是将在IE8中重现错误的示例代码。调整窗口大小以触发错误:
<html>
<head>
<title>Graph Test</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var opt = {
legend: { position: 'none' },
axisTitlesPosition: 'none',
enableInteractivity: 'false',
hAxis: {textPosition: 'none'},
vAxis: {textPosition: 'none', maxValue: 11, minValue: 6, gridlines: {color: 'transparent'}, baselineColor: 'transparent'},
lineWidth: 1,
bar: {groupWidth:'75%'},
seriesType: "bars",
series: {1: {type: "line"}},
chartArea: {'width': '90%', 'height': '90%'},
colors: ['#4D8C8C', '#a7a7a7'],
backgroundColor: '#d3eeee'
}
var myArray = [
['ID', 'Value', {role: 'style'}, 'Rec', {role: 'certainty'}],
[1, 8, '#FF0000', 10, false],
[2, 7, '#FF0000', 10, false],
[2, 10, '#FF0000', 10, false]
];
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){drawChart(myArray,opt)});
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
}
$(document).ready(function() {
$( window ).resize(function() {
drawChart(myArray,opt);
});
});
</script>
</head>
<body>
<div id="chart_div" style="width: auto; height: 50px;"></div>
</body>
</html>
答案 0 :(得分:1)
不是每次都创建一个新的图表对象,而是重新绘制现有的图表对象:
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
$( window ).resize(function() {
chart.draw(data, opt);
});
}