谷歌气泡图：如何使用资源管理器+动画

Question

我想添加一个动画到我的气泡图，但如果我添加它，浏览器功能停止工作。

的javascript：

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawSeriesChart); 

    function drawSeriesChart() {   
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Score', 'Doc Count', 'Classification', 'Rules Matched'], 
      ['foo', 0.29380098, 1, 1, 6], 
      ['bar', 0.29226518, 1, 1, 6], 
      ['poo', 0.24833801, 0, 0, 5] 
     ]); 

     var options = { 
      hAxis: {title: 'Score'}, 
      explorer: { 

      }, 
      vAxis: {title: 'Document Count'}, 
      bubble: {opacity: 0.5, textStyle: {color: 'transparent'}}, 
      colors: ['green', 'red'], 
      colorAxis: {legend: {position: 'none'}}, 
      fontSize: 12, 
      fontName: 'Source Sans Pro', 
      animation: {startup: true, duration: 2000} 
     }; 

     var chart = new google.visualization.BubbleChart(document.getElementById('bubbles')); 
     chart.draw(data, options); 
    } 
</script> 

HTML：

<div id="bubbles" style="max-height: 450px; height: 450px; margin: auto;"> 
</div> 

我在做什么错？

，你可以在这里看到小提琴：https://jsbin.com/tafiyafofu/edit?html,output

Answer 1

我不知道如果做了错事，文件没有提到有冲突，当你使用这两个选项。 但exporer被标记为“实验”，所以可能会发生任何事情。

可能的解决方法：重新绘制图表（不包括动画）当动画已经完成：

 var chart = new google.visualization.BubbleChart(document.getElementById('bubbles')); 
     google.visualization.events.addOneTimeListener(chart,'animationfinish',function(){ 
     delete options.animation; 
     chart.draw(data, options); 
     }); 
     chart.draw(data, options);