GoogleChart重绘功能上的IE8错误

时间:2014-03-25 02:17:04

标签: javascript jquery internet-explorer-8 google-visualization

我正在使用Google Charts API使用arrayToDataTable例程绘制几个ComboCharts。一切都加载正常,但如果我试图重绘任何图表,则会发生错误(仅在IE8中 )。

当我使用JQuery的$(window).resize触发重绘图表时,我首先注意到了这一点,但即使我只是执行两个背对背的chart.draw函数,问题仍然存在。

任何想法......

  • 导致此错误的原因是什么?
  • 我该如何解决?
来自IE8的

脚本错误(重复多次):

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>

1 个答案:

答案 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);
    });
}