Question

我想在<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', animation:{ duration: 1000, easing: 'linear', startup: true }, } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, options); } </script> </head> <body> <div id="columnchart_material" style="width: 900px; height: 500px;"></div> </body> </html>应用程序中启动图表时在Google柱形图中添加启动动画。我试图运行GoogleChart处给出的代码

 animation: {
          duration: 1000,
          easing: 'linear',
          startup: true
      },

我已将动画属性添加为：

{{1}}

但该图表在开始时并未在Android App中制作动画。我也尝试在浏览器中运行代码，图表工作正常但不是动画。

Answer 1

有几个选项材料图表不支持，包括/var/opt/gitlab/gitlab-rails/shared/artifacts/<year_month>/<project_id?>/<jobid>

参见 - ＆gt; Tracking Issue for Material Chart Feature Parity #2143

材料图表 - ＆gt; animation - google.charts.Bar

核心图表 - ＆gt; packages: ['bar'] - google.visualization.ColumnChart

使用带有以下选项的 Core 图表，将类似显示为材料

packages: ['corechart']

使用theme: 'material'时，该选项不属于任何其他

问题中的代码animation是animation的一部分 - （chart）

它更像是......

chart.animation

使用 Core 图表查看var options = { animation:{ duration: 1000, easing: 'linear', startup: true }, chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } };的以下工作代码段...

＆＃13;

animation

＆＃13;

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
    },
    height: 600,
    theme: 'material',
    title: 'Company Performance'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
  chart.draw(data, options);
}

＆＃13;

注意： 核心图表没有<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_material"></div>的选项

在Android应用程序中为柱形图设置动画

1 个答案: