在Android应用程序中动画显示柱形图

我想在谷歌中添加启动动画在Android应用程序中启动图表的柱形图。我试图运行在GoogleChart给出的代码，在Android应用程序中动画显示柱形图

<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应用程序上开始动画。我也尝试在浏览器中运行代码，图表工作正常，但不是动画。

来源

2017-03-01 user6750923

有几个选项材料图表不支持，包括animation

看到 - >Tracking Issue for Material Chart Feature Parity #2143

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

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

来源

2017-03-01 12:37:39 WhiteHat

在Android应用程序中动画显示柱形图

回答

相关问题