javascript - 谷歌折线图中从左到右的启动动画

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 rawData = [

[new Date(2019,01,01), 1.00, 'example tooltip'],
[new Date(2019,01,03), 1.03, 'example tooltip'],
[new Date(2019,01,05), 2.00, 'example tooltip'],
[new Date(2019,01,07), 1.30, 'example tooltip'],
[new Date(2019,01,09), 1.00, 'example tooltip'],
[new Date(2019,01,11), 2.00, 'example tooltip'],
[new Date(2019,01,13), 1.10, 'example tooltip'],
[new Date(2019,01,15), 1.50, 'example tooltip'],
[new Date(2019,01,17), 1.20, 'example tooltip'],
[new Date(2019,01,19), 3.00, 'example tooltip'],
[new Date(2019,01,21), 1.30, 'example tooltip'],
[new Date(2019,01,23), 1.25, 'example tooltip']

            ];

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

<小时/>

编辑

看起来控件的范围在第一次绘制时被卡住了。
请参阅以下工作片段，
在这里，我在图表和控件上设置轴范围，
每次抽奖之前...

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: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'LineChart',
        chartOptions: {
          animation:{
            startup:true,
            duration: 1000,
            easing: 'out'
          },
          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'
      },
      chartArea: {
        height: '80%',
        width: '84%',
        interpolateNulls: true
      },
      hAxis: {
        title: ''
      },
      vAxis: {
        format: '#,##0',
        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}});
  data.addRows([
    [new Date(2019,01,01), 1.00, 'example tooltip'],
    [new Date(2019,01,03), 1.03, 'example tooltip'],
    [new Date(2019,01,05), 2.00, 'example tooltip'],
    [new Date(2019,01,07), 1.30, 'example tooltip'],
    [new Date(2019,01,09), 1.00, 'example tooltip'],
    [new Date(2019,01,11), 2.00, 'example tooltip'],
    [new Date(2019,01,13), 1.10, 'example tooltip'],
    [new Date(2019,01,15), 1.50, 'example tooltip'],
    [new Date(2019,01,17), 1.20, 'example tooltip'],
    [new Date(2019,01,19), 3.00, 'example tooltip'],
    [new Date(2019,01,21), 1.30, 'example tooltip'],
    [new Date(2019,01,23), 1.25, 'example tooltip']
  ]);
  var view = new google.visualization.DataView(data);

  var dateRange = data.getColumnRange(0);
  chart.setOption('hAxis.viewWindow', dateRange);
  chart.setOption('vAxis.viewWindow', data.getColumnRange(1));

  dashboard.bind(control, chart);

  drawChart();
  setInterval(drawChart, 1200);

  var rowIndex = 0;
  var viewRows = [];
  function drawChart() {
    if (rowIndex < data.getNumberOfRows()) {
      viewRows.push(rowIndex++);
      view.setRows(viewRows);
      control.setState({range: {
        begin: dateRange.min,
        end: dateRange.max
      }});
      dashboard.draw(view);
    }
  }
});

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