使用 javascript 动画单折线图

Question

我是 Google 折线图的新手。我尝试绘制的图表已正确绘制，但我想为其设置动画。我尝试在代码中使用动画部分，但似乎它在单线图上根本不起作用。

google.charts.load('current', {
  'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Test');
  data.addColumn('number', 'Test 2');

  data.addRows([
    [1, 37.8],
    [2, 30.9],
    [3, 25.4],
    [4, 11.7]
  ]);

  var options = {
    animation: {
      duration: 1000,
      startup: true, //This is the new option
      easing: 'out',
    },
    aggregationTarget: 'category',
    chart: {
      title: 'Test 1',
      subtitle: 'Test 2'
    },
    width: '98%',
    height: 300,
    axes: {
      x: {
        0: {
          side: 'top'
        }
      }
    }
  };

  var chart = new google.charts.Line(document.getElementById('line_top_x'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>

Answer 1

Material 图表不支持动画
其实有几个选项Material图表不支持

参见 --> Tracking Issue for Material Chart Feature Parity #2143

Material 图表 --> google.charts.Line -- packages: ['line']

核心图表 --> google.visualization.LineChart -- packages: ['corechart']

使用带有以下选项的 Core 图表将显示 similar to Material

theme: 'material'

使用 javascript 动画单折线图

Animating single line chart using javascript

javascript

charts

google-visualization