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

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>

我做错了什么？

您可以在此处查看 fiddle：https://jsbin.com/tafiyafofu/edit?html,output

Answer 1

我不确定是否做错了什么，文档没有提到当您同时使用这两个选项时会发生冲突。但是 exporter 被标记为 "experimental"，所以任何事情都可能发生。

可能的解决方法：动画完成后重新绘制图表（无动画）：

      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);

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

Google bubble charts: how to use explorer + animation

javascript

animation

bubble-chart

google-visualization