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

它到目前为止工作得很好，但我想在我的示例中实现这个启动动画 ()。我试着放置

drawChart();
    setInterval(drawChart, 1200);

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

在正确的位置，但图表根本没有绘制:(。任何人都知道我在我的示例中必须做什么才能从左到右获得这个漂亮的启动动画。

Answer 1

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

请参阅以下代码片段...

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>

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

Startup animation from left to right in google line chart

javascript

charts

linechart