グラフデータが変更されるとGoogleグラフアニメーションが見えなくなる
P粉170438285
2023-09-02 12:32:58
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
グラフをあるデータセットから次のデータセットにアニメーションさせるには、描画するたびに新しいグラフを作成するのではなく、同じグラフへの参照を保持する必要があります。
次の例を参照してください...
リーリー注: Google 円グラフはアニメーション効果をサポートしていません。