2016-07-26 6 views
1

スタートアップ時にGoogle棒グラフをアニメートしようとしています。グラフは表示されますが、アニメートされません。私は、チャートの棒グラフをゼロから最終値まで伸ばしたいと思っています。私はanimation.startupをtrueに設定しましたが、まだアニメーション化されません。私は間違って何をしていますか?Googleグラフのスタートアップアニメーションが機能しない

eh.html:

<html> 
    <head> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script type="text/javascript" src="eh.js"></script> 

    </head> 
    <body> 
     <div id="chart_div"></div> 
</body> 
</html> 

eh.js:

google.charts.load('current', { 
    packages: ['bar'], callback: drawChart 
}); 


function drawChart() { 
    var choices = ["Banana", "Apple", "Orange"]; 
    var votes = [1, 2, 3]; 
    var name = "Favorite fruit"; 
    var dataArray = [ 
     ['Choice', 'Votes'] 
    ]; 

    for (var i = 0; i < choices.length; i++) { 
     dataArray.push([choices[i], votes[i]]); 
    } 
    var data = google.visualization.arrayToDataTable(dataArray); 

    var options = { 
    animation:{ 
     duration: 1000, 
     easing: 'linear', 
     startup: true 
    }, 
    vAxis: {minValue:0, maxValue:100000000}, 
    title: "votes", 
    legend: { position: 'none' }, 
    chart: { title: name, 
      subtitle: 'popularity by Votes' }, 
    bars: 'horizontal', // Required for Material Bar Charts. 
    axes: { 
     x: { 
     0: { side: 'top', label: 'Votes'} // Top x-axis. 
     } 
    }, 
    bar: { groupWidth: "90%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

答えて

0

アニメーションが材質チャート

でサポートされていませんが、あなたが見て取得し、

が、トップ

近い感じにオプション theme: 'material'を使用することができます

Supported Modifications有効なチャートタイプを参照してくださいx軸はサポートされていません'corechart'

google.charts.load('current', { 
 
    callback: function() { 
 
    var choices = ["Banana", "Apple", "Orange"]; 
 
    var votes = [1, 2, 3]; 
 
    var name = "Favorite fruit"; 
 
    var dataArray = [ 
 
     ['Choice', 'Votes'] 
 
    ]; 
 

 
    for (var i = 0; i < choices.length; i++) { 
 
     dataArray.push([choices[i], votes[i]]); 
 
    } 
 
    var data = google.visualization.arrayToDataTable(dataArray); 
 

 
    var options = { 
 
     animation:{ 
 
      duration: 1000, 
 
      easing: 'linear', 
 
      startup: true 
 
     }, 
 
     vAxis: {minValue:0, maxValue:100000000}, 
 
     title: "votes", 
 
     legend: { position: 'none' }, 
 
     title: name + '\n' + 'popularity by Votes', 
 
     theme: 'material', 
 
     bar: { groupWidth: "90%" } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

...次の作業のスニペットを参照してくださいおかげで、これは動作しました! –

0

あなたは他の選択肢をしたい場合。おそらくChart.jsを使用することができます 多くの例や人気のあるウィットを学ぶのは簡単です。

私は新しいので、これがあなたを助けてくれることを願っています。 Chart.js Documentation

関連する問題