Googleビジュアライゼーションチャートのデバッグ - コールバックが複数回呼び出されています

Question

私のカルテが見えているときにアニメーションを作成する必要があります。グラフは最初のデータを繰り返す - 複数のコールバック？そしてそれは13341

$(allInView); 
$(window).scroll(allInView); 
function isScrolledIntoView(elem) { 
var docViewTop = $(window).scrollTop(); 
var docViewBottom = docViewTop + $(window).height(); 
var elemTop = $(elem).offset().top; 
var elemBottom = elemTop + $(elem).height(); 
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 



    function allInView() { 
    google.charts.load('current', { 
    callback: function() { 
     var rawData = [ 
      ['2001', 13341], 
      ['2009', 28334], 
      ['2009', 423686] 
     ]; 
     var data = new google.visualization.DataTable({ 
      "cols": [ 
      {"id":"","label":"Year","type":"string"}, 
      {"id":"","label":"Revenue","type":"number"} 
      ] 
     }); 
     var options = { 
      hAxis: {textStyle:{color: '#FFF'}, viewWindow: { min: 0, max: 4}}, 
      vAxis: { baseline:0, baselineColor: '#FFF', gridlineColor: '#FFF', textStyle:{color: '#FFF'}, viewWindow: {min: 0,max: 800000} }, 
      backgroundColor: 'transparent', 
      legend: { position: 'none' }, 
      colors: ['#FFF'], 
      textStyle:{color: '#FFF'}, 
      pointSize: 10, 
      series: { 
       0: { pointShape: 'square'} 
      }, 
      pointSize: 4, 
      lineWidth: 3, 
      animation:{ 
      startup: true, 
      duration: 300, 
      easing: 'linear' 
      } 
     }; 
     var chart = new google.visualization.ColumnChart(document.getElementById('curve_chart')); 
     drawChart(); 
     setInterval(drawChart, 1000); 
     var rowIndex = 0; 
     function drawChart() { 
      if (rowIndex < rawData.length) { 
      data.addRow(rawData[rowIndex++]); 
      chart.draw(data, options); 
      } 
     } 
     }, 
     packages:['corechart'] 
    }); 
} 

Answer 1

が質問からコードに構文エラーがあり、2001年までランニングの5倍後のデータの残りの部分を通る

var options 1つのあまりにも多くのクロージングブラケット

を持っています作業スニペット次 animationオプション

参照を含める必要も

、...

google.charts.load('current', { 
 
    callback: function() { 
 
    var rawData = [ 
 
     ['2007', 132321], 
 
     ['2023', 245454], 
 
     ['2043', 623436] 
 
    ]; 
 
    var data = new google.visualization.DataTable({ 
 
     "cols": [ 
 
     {"id":"","label":"Year","type":"string"}, 
 
     {"id":"","label":"Followers","type":"number"} 
 
     ] 
 
    }); 
 
    var options = { 
 
     animation: { 
 
     startup: true, 
 
     duration: 800, 
 
     easing: 'in' 
 
     }, 
 
     backgroundColor: 'cyan', 
 
     legend: {position: 'none'}, 
 
     colors: ['#FFF'], 
 
     textStyle:{color: '#FFF'}, 
 
    }; 
 
    var chart = new google.visualization.ColumnChart(document.getElementById('curve_chart')); 
 
    drawChart(); 
 
    setInterval(drawChart, 1000); 
 
    var rowIndex = 0; 
 
    function drawChart() { 
 
     if (rowIndex < rawData.length) { 
 
     data.addRow(rawData[rowIndex++]); 
 
     chart.draw(data, options); 
 
     } 
 
    } 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="curve_chart"></div>