在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應用程序中動畫顯示柱形圖

回答

相關問題