調試Google Visualization Chart - 多次調用回調

Question

我需要我的圖表來制作它在視野中的動畫。 圖表不斷重復第一段數據 - 多次回調？ 然后在經歷了2001年，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

問題的代碼中存在語法錯誤

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>