标签：javascript arrays google-visualization

现在,我的代码如下所示：

function drawChart() {

     var data = new google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Revenue');

      data.addRows([
        ['', 0],
        ['2008', 123],
        ['2010', 213],
        ['2012', 654]
      ]);

    var options = {
      hAxis: {textStyle:{color: '#FFF'}},  
      vAxis: { baseline:0, baselineColor: '#FFF', gridlineColor: '#FFF',  textStyle:{color: '#FFF'} },
      backgroundColor: 'transparent',
      legend: { position: 'none' },
      colors: ['#FFF'],
      textStyle:{color: '#FFF'},
      pointSize: 10,
      series: {
            0: { pointShape: 'star'}
        },
      animation: {startup: true, duration: 5000, easing: 'linear',}

    };



    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
  }

我想要的是让我的动画逐步显示每一行.我该怎么做呢？

任何帮助将不胜感激.

解决方法:

必须绘制图表以使动画发生

保留数据,一次只能绘制一行

请参阅以下工作片段…

google.charts.load('current', {
  callback: function () {
    var rawData = [
      [0, 0],
      [1, 2],
      [2, 1],
      [3, 4],
      [4, 2],
      [5, 8],
      [6, 3],
      [7, 16],
      [8, 4],
      [9, 32]
    ];

    var data = new google.visualization.DataTable({
      "cols": [
        {"id":"","label":"X","type":"number"},
        {"id":"","label":"Y","type":"number"}
      ]
    });

    var options = {
      pointSize: 4,
      animation:{
        startup: true,
        duration: 600,
        easing: 'in'
      },
      legend: 'none',
      hAxis: {
        viewWindow: {
          min: 0,
          max: 9
        }
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 32
        }
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    drawChart();
    setInterval(drawChart, 1200);

    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="chart_div"></div>

标签：javascript,arrays,google-visualization
来源： https://codeday.me/bug/20191011/1889816.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。