При загрузке анимации Google LineChart

Question

Я пытаюсь реализовать загрузку анимации диаграммы с помощью анимации перехода, добавляя строки и обновляя диаграмму. Но он ведет себя совершенно иначе, чем я ожидаю. Вот Fiddle http://jsfiddle.net/jATUX/ Некоторый код:

google.load('visualization', '1', { packages: ['corechart'], callback: function() { 
     var data = new google.visualization.DataTable(); 
     data.addRows(5); 

     data.addColumn('string', ''); 
     data.addColumn('number', 'Sales'); 

     var options = { 
      title: 'Sales by months for 2013 year', curveType: 'function', 
      "vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5", 
      animation: { duration: 1000 } 
     }; 
     var chart = new google.visualization.LineChart(document.getElementById('test')); 

     var index = 0; 
     var chartData = [ 
      ['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3] 
     ] 
     var drawChart = function() { 
      console.log('drawChart index ' + index); 
      if (index < chartData.length) { 
       data.addRows([chartData[index++]]); 
       chart.draw(data, options); 
      } 
     } 

     google.visualization.events.addListener(chart, 'ready', drawChart); 
     chart.draw(data, options); 
    }}); 

Answer 1

Хорошо, я сумел решить это. Это все вопрос использования «animationfinish» То, что сейчас выглядит как http://jsfiddle.net/HDu8H/ или

google.load('visualization', '1', { packages: ['corechart'], callback: function() { 
     var data = new google.visualization.DataTable(); 
     data.addRows(5); 

     data.addColumn('string', ''); 
     data.addColumn('number', 'Sales'); 
     data.addRows(5); 
     data.setValue(0, 0, 'Jan'); 
     data.setValue(1, 0, 'Feb'); 
     data.setValue(2, 0, 'Mar'); 
     data.setValue(3, 0, 'Apr'); 
     data.setValue(4, 0, 'May'); 

     var options = { 
      title: 'Sales by months for 2013 year', curveType: 'function', 
      "vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5", 
      animation: { duration: 250 } 
     }; 
     var chart = new google.visualization.LineChart(document.getElementById('test')); 

     var index = 0; 
     var chartData = [ 5, 1, 4, 2, 3 ] 
     var drawChart = function() { 
      console.log('drawChart index ' + index); 
      if (index < chartData.length) { 
       data.setValue(index, 1, chartData[index++]); 
       chart.draw(data, options); 
      } 
     } 

     google.visualization.events.addListener(chart, 'animationfinish', drawChart); 
     chart.draw(data, options); 
     drawChart(); 
    }});