Google折线图中从左到右的启动动画

Question

 google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

   var control = new google.visualization.ControlWrapper({
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': {
       // Filter by the date axis.
       'filterColumnIndex': 0,
       'ui': {
         'chartType': 'LineChart',
         'chartOptions': {
           'chartArea': {'width': '84%'},
             'hAxis': {'baselineColor': 'none', format: "dd.MM.yyyy" }
         }
       }
     },
   });

   var chart = new google.visualization.ChartWrapper({
     'chartType': 'LineChart',
     'containerId': 'chart',
     'options': {
         animation:{
           startup:true,
        duration: 1000,
        easing: 'out'
      },
       tooltip: {isHtml: true},
       lineWidth: 4,
       legend: {position: 'none'},
       // Use the same chart area width as the control for axis alignment.
       'chartArea': {'height': '80%', 'width': '84%',interpolateNulls: true},
       hAxis: {
          title: ''
        },
        vAxis: {  format :<?php echo "'#.## ".html_entity_decode($currencyhtml[$userCurrency])."'"; ?>,
                    viewWindowMode:'pretty',
        gridlines: {
          count: 4,
        },
                   'slantedText': false,
          title: ''
        },
     }
     // Convert the first column from 'date' to 'string'.

   });



var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Value');
        data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});


       var addRows = [

           <?php 
          // Get Value and Date data 
          $getvaluedataSQL = "SELECT recorded, value FROM cardvalueDB WHERE scryfallid = '".$sid."'";
          $getvaluedataQUERY = mysqli_query($conn, $getvaluedataSQL);
          while($getvaluedata = mysqli_fetch_array($getvaluedataQUERY)) {

            $date = new DateTime($getvaluedata['recorded']); //
            $month = $date->format('m') - 1;


            echo "[new Date(".$date->format('Y, ' . $month . ', d')."), ".($getvaluedata['value'] * $currency[$userCurrency]).", '<div style=\"padding:10px; width:120px; font-size:14px; font-weight: bold;\">  ".$date->format('d-' . $month . '-Y')."<br>Value: ".html_entity_decode($currencyhtml[$userCurrency])." ".(round($getvaluedata['value'] * $currency[$userCurrency], 2))." </div>'], ";
          }

          ?>


        ];

  dashboard.bind(control, chart);

  drawChart();
  setInterval(drawChart, 1200);

  var rowIndex = 0;
  function drawChart() {
    if (rowIndex < rawData.length) {
      data.addRow(rawData[rowIndex++]);
      dashboard.draw(data);
    }
  }
}

到目前为止效果很好，但在我的示例中我想实现此启动动画（Google Visualization: Animated Line Graph --incremental rather than all at once?）。我试图放置

drawChart();
    setInterval(drawChart, 1200);

    var rowIndex = 0;
    function drawChart() {
      if (rowIndex < rawData.length) {
        data.addRow(rawData[rowIndex++]);
        chart.draw(data, options);
      }
    }

在正确的位置，但是图形根本没有绘制:(。任何人都知道我在示例中要做的事情，以便从左到右获得这个不错的启动动画。

Answer 1

您需要将数据添加到常规数组中，然后一次向数据表添加一行，并在添加每一行后绘制仪表板。

请参见以下代码段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      // Filter by the date axis.
      filterColumnIndex: 0,
      ui: {
        chartType: 'LineChart',
        chartOptions: {
          chartArea: {
            width: '84%'
          },
          hAxis: {
            baselineColor: 'none',
            format: "dd.MM.yyyy"
          }
        }
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart',
    options: {
      animation:{
        startup:true,
        duration: 1000,
        easing: 'out'
      },
      tooltip: {
        isHtml: true
      },
      lineWidth: 4,
      legend: {
        position: 'none'
      },
      // Use the same chart area width as the control for axis alignment.
      chartArea: {
        height: '80%',
        width: '84%',
        interpolateNulls: true
      },
      hAxis: {
        title: ''
      },
      vAxis: {
        format: <?php echo "'#.## ".html_entity_decode($currencyhtml[$userCurrency])."'"; ?>,
        viewWindowMode: 'pretty',
        gridlines: {
          count: 4,
        },
        slantedText: false,
        title: ''
      },
    }
  });

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time of Day');
  data.addColumn('number', 'Value');
  data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

  rawData = [

    [new Date(".$date."), '".$value."'], ";
   ...
   ... (and so on) ...

  ];

  dashboard.bind(control, chart);

  drawChart();
  setInterval(drawChart, 1200);

  var rowIndex = 0;
  function drawChart() {
    if (rowIndex < rawData.length) {
      data.addRow(rawData[rowIndex++]);
      dashboard.draw(data);
    }
  }
}