анимировать диаграмму google при загрузке

Question

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

Google Chart:

   <script type="text/javascript"> 

        google.load("visualization", "1.1", { packages: ["bar"] }); 
        google.setOnLoadCallback(drawChart); 
        function drawChart() { 

         var options = { 
          'title': '', 
          'animation': { duration: 1000, easing: 'out', } 
         }; 

         var data1 = new google.visualization.arrayToDataTable([ 
          ['Date', 'Under Review', 'Accepted', 'Rejected', 'In Print', 'Published'], 
          @Html.Raw(rows)]);       

         var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 

         chart.draw(data1, options); 
        } 
       </script> 
       <div id="columnchart_material" style="width: 750px; height: 400px;"></div> 

Диаграмма делает дисплей, но не имеет такой эффект анимации, когда я загрузить страницу, он просто отображает его

Answer 1

Анимация событийная. Для анимации «под нагрузку», вам нужно добавить startup ваши варианты ...

animation:{ 
     duration: 1000, 
     easing: 'out', 
     startup: true 
    }, 

Answer 2

После долгих исследований, кажется, что Google пока не имеет опции для столбчатых диаграмм для анимации при загрузке. Однако я нашел диаграмму столбцов, у которой есть опция анимации при загрузке, которая работает для меня. Найденный здесь: http://jsfiddle.net/gb758owr/

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
        <script type="text/javascript"> 
         google.load("visualization", "1.1", {packages: ["corechart"]}); 
         google.setOnLoadCallback(drawChart); 
         function drawChart() {       
          var data1 = google.visualization.arrayToDataTable([ 
           ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'], 
           @Html.Raw(rows)]); 
          var options = { 
           animation: { 
            duration: 1500, 
            startup: true 
           } 
          }; 
          chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
          chart.draw(data1, options);