Анимация однолинейного графика с использованием javascript - PullRequest
Новая
       5

Анимация однолинейного графика с использованием javascript

1 голос
/ 19 марта 2020

Я новичок в линейной диаграмме 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>

1 Ответ

0 голосов
/ 19 марта 2020

анимация не поддерживается на Материал диаграммы
На самом деле, есть несколько вариантов Материал диаграммы не поддерживают

см. -> Ошибка отслеживания для паритета характеристик материалов № 2143

Материал диаграммы -> google.charts.Line - packages: ['line']

Диаграммы Core -> google.visualization.LineChart - packages: ['corechart']

с использованием диаграммы Core со следующей опцией будут отображать аналогично to Материал 

theme: 'material'
...