Пузыри 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>

Что я делаю неправильно?

вы можете увидеть скрипку здесь: https://jsbin.com/tafiyafofu/edit?html,output

Answer 1

Я не уверен, что делаю что-то не так, в документации не упоминается, что возникает конфликт при использовании обоих вариантов. Но экспортер помечен как "экспериментальный", поэтому может случиться что угодно.

Возможный обходной путь: перерисовать диаграмму (без анимации) после завершения анимации:

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