Google チャートのアニメーションを適切に動作させることができません。問題は、グラフがデータを更新するだけでなく再描画し続けることだと思いますが、Google のサンプル コードと JavaScript に関する私の限られた知識に基づくと、これを修正する方法がわかりません。グラフは最終的にデータ ソースからデータを動的に更新するため、グラフを更新するボタンは含めたくありません。データの変更を適切にアニメーション化するにはどうすればグラフを更新できますか?
参考: https://developers.google.com/chart/interactive/docs/animation
<頭> <ベースターゲット="_top"> <本体> <スクリプト> 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); スクリプト> ボディ>本体> 頭>
グラフをあるデータセットから次のデータセットにアニメーションさせるには、描画するたびに新しいグラフを作成するのではなく、同じグラフへの参照を保持する必要があります。
次の例を参照してください...
リーリー注: Google 円グラフはアニメーション効果をサポートしていません。