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有太多关闭括号

还需要包含animation个选项

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

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

＆＃13;

调试Google Visualization Chart - 多次调用回调

1 个答案: