차트 데이터가 변경되면 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>
</머리>
<본문>
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
차트가 한 데이터세트에서 다음 데이터세트로 애니메이션을 적용하려면 그릴 때마다 새 차트를 만드는 대신 동일한 차트에 대한 참조를 유지해야 합니다.
다음 예시를 참고해주세요...
으아악참고: Google 파이 차트는 애니메이션 효과를 지원하지 않습니다.