차트 데이터가 변경되면 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>
</머리>
<본문>
<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 데이터 = 새로운 google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', '슬라이스');
data.addRows([
['버섯', 버섯데이터],
['양파', 1],
['올리브', 1],
['호박', 1],
['페퍼로니', 2]
]);
var 옵션 = {
title: '어젯밤에 피자를 얼마나 먹었나요?',
너비: '100%',
애니메이션: {기간: 1000, 완화: '아웃'}
};
var Chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
Chart.draw(데이터, 옵션);
}
setInterval(drawChart, 1000);
</스크립트>
</body>
</html></pre>
