Question

现在我的代码看起来像这样：

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

我想要的是我的动画逐渐显示每一行。我该怎么做呢？

非常感谢任何帮助。

Answer 1

必须绘制图表才能生成动画

保持数据并且一次只绘制一行

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

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>

谷歌可视化：动画线图 - 增量而不是一次全部？

1 个答案: