谷歌气泡图:如何使用浏览器+动画

Google bubble charts: how to use explorer + animation

本文关键字：浏览器 动画 何使用 气泡 谷歌      更新时间：2023-09-26

我正在尝试添加动画到我的气泡图，但是如果我添加它，资源管理器功能停止工作。

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

我不确定是否做错了什么，文档没有提到当您使用两个选项时存在冲突。但是曝光器被标记为"实验"，所以任何事情都有可能发生。

可能的解决方法:动画完成后重新绘制图表(不带动画):

      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);
相关文章：