Google可视化：动画线图 - 增量而非全部一次？ [英] Google Visualization: Animated Line Graph --incremental rather than all at once?

问题描述

 函数drawChart（）{
 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Year'）; 
 data.addColumn（'数字'，'收入'）; 
 
 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，缓动：'in'}，图例：'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;函数drawChart（）{if（rowIndex< rawData.length）{data.addRow（rawData [rowIndex ++]）; chart.draw（数据，选项）; }}}，packages：['corechart']}）;

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

Right now my code looks like this:

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

What I want is for my animation to incrementally reveal each row. How do I go about doing this?

Any help would be greatly appreciated.

解决方案

the chart must be drawn for animation to occur

hold on to the data and only draw one row at a time

see following working snippet...

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>

这篇关于Google可视化：动画线图 - 增量而非全部一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！