动画在Android应用柱形图(Animate the Column chart in Androi

2019-09-29 20:58发布

我想补充在谷歌柱形图启动动画上开始在图表Android应用。 我试图运行在给定的代码GoogleChart是

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

我已经加入了动画属性为:

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

但图表未在Android应用程序上的动画开始。 我也试图在浏览器中运行的代码,图表工作正常,但没有动画。

Answer 1:

有几种选择材料图表不支持,其中包括animation

见- > 物料图表功能奇偶#2143跟踪问题


材料图表- > google.charts.Bar - packages: ['bar']

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


使用图表具有以下选项将显示类似 材料

theme: 'material'

当使用animation ,则该选项没有任何其他的一部分

在问题的码具有animation作为其一部分chart - ( chart.animation

它会比较喜欢...

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

看到下面的工作片断animation使用核心图...

 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> 


注意: 核心图表不具备选择chart



文章来源: Animate the Column chart in Android application