Animate the Column chart in Android application

2019-07-26 13:43发布

站内问答 / JavaScript
583 1 4

I want to add start up animation in google Column chart on starting the chart in Android Application. I tried to run the code given at GoogleChart that is

<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>

I have added the animation properties as:

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

But the chart is not animating in Android App on the start. I also tried to run the code in browser, the chart is working fine but is not animating.

1条回答
啃猪蹄的小仙女
2楼-- · 2019-07-26 14:13

there are several options Material charts do not support, including animation

see --> Tracking Issue for Material Chart Feature Parity #2143

Material charts --> google.charts.Bar -- packages: ['bar']

Core charts --> google.visualization.ColumnChart -- packages: ['corechart']

using a Core chart with the following option will display similar to Material 

theme: 'material'

when using animation, the option is not part of any other

the code in the question has animation as part of chart -- (chart.animation)

it would be more like... 

var options = {
  animation:{
    duration: 1000,
    easing: 'linear',
    startup: true
  },
  chart: {
    title: 'Company Performance',
    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
  }
};

see following working snippet for animation using Core chart... 

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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>

note: Core chart does not have option for chart

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)