グラフデータが変更されるとGoogleグラフアニメーションが見えなくなる
<p>Google チャートのアニメーションを適切に動作させることができません。問題は、グラフがデータを更新するだけでなく再描画し続けることだと思いますが、Google のサンプル コードと JavaScript に関する私の限られた知識に基づくと、これを修正する方法がわかりません。グラフは最終的にデータ ソースからデータを動的に更新するため、グラフを更新するボタンは含めたくありません。データの変更を適切にアニメーション化するにはどうすればグラフを更新できますか? </p>
<p>参考: https://developers.google.com/chart/interactive/docs/animation</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<頭>
<ベースターゲット="_top">
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<本体>
<div id="pizzaChart" style="overflow: hidden"></div>
<p id="ロガー"></p>
<スクリプト>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
関数drawChart() {
var マッシュルームデータ = Math.floor(Math.random() * 11);
document.getElementById("ロガー").innerHTML = マッシュルームデータ;
var data = 新しい google.visualization.DataTable();
data.addColumn('文字列', 'トッピング');
data.addColumn('数値', 'スライス');
data.addRows([
['マッシュルーム', マッシュルームデータ],
[「玉ねぎ」、1]、
[「オリーブ」、1]、
[「ズッキーニ」、1]、
[「ペパロニ」、2]
]);
var オプション = {
タイトル: 「昨日の夜、ピザをどのくらい食べましたか」、
幅: '100%'、
アニメーション: {期間: 1000、イージング: 'out'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
chart.draw(データ, オプション);
}
setInterval(drawChart, 1000);
</スクリプト>
</ボディ>
</html></pre>
