Google 차트에 애니메이션을 적용하려면 어떻게해야합니까?

Question

스크립트 태그에서 다음 코드를 추가했는데 애니메이션으로 만들 수 없습니다. 친절하게 suugest

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     animation: { 
      duration: 1000, 
      easing: 'out' 
     }, 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
    }; 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

차트가로드 중이지만 애니메이션을 만들 수 없습니다. 로딩 할 때 애니메이션 적용

Answer 1

데이터에서 무언가를 변경할 때 애니메이션이 표시됩니다. 코드를 다음과 같이 변경하십시오.

및 비용 값 400은 애니메이션을 사용하여 1000으로 변경됩니다.

일부 힌트는 about animation에서 확인하십시오.

업데이트 : 거기 부하에 아무런 애니메이션이 없지만 당신이 가짜가이로드처럼 모두에 0 beggining에서 다음 실제 데이터를 다시 그릴 수있는 것 같다

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 0,  0], 
    ['2005', 0,  0], 
    ['2006', 0,  0], 
    ['2007', 0,  0] 
]); 

var options = { 
    title: 'Company Performance', 
    animation: { 
     duration: 1000, 
     easing: 'out' 
    }, 
    vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
}; 
var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
chart.draw(data, options); 

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
]); 
chart.draw(data, options); 

Answer 2

부하에 애니메이션을 추가, startup: true을 애니메이션 옵션에 추가하십시오 (참조 : documentation). 전체 코드 :

  animation: { 
      duration: 1000, 
      easing: 'out', 
      startup: true 
     } 

Answer 3

사용 본

var options = 
{ 
    title: 'Total Sale Today', 
    animation: 
      { 
       "startup": true, 
       duration: 2000, 
       easing: 'out' 
      } 
} 

Answer 4

var data = google.visualization.arrayToDataTable(chartArr); 

var options = { 
    sliceVisibilityThreshold: .0, 
    pieHole: 0.3, 
    legend: 'none', 
    pieSliceText: 'label', 
    height:500, 
    width : "100%", 
    is3D: true, 
    animation:{ 
    duration: 5000, 
    easing: 'out', 
    startup: true //This is the new option 
    }, 
}; 

var chart = new google.visualization.PieChart(document.getElementById('ethnicityChartInq')); 

chart.draw(data, options); 

// initial value 
var percent = 0; 
// start the animation loop 
var handler = setInterval(function(){ 
    // values increment 
    percent += 1; 
    // apply new values 
    data.setValue(0, 1, percent); 
    data.setValue(1, 1, 100 - percent); 

    // update the pie 
    chart.draw(data, options); 
    // check if we have reached the desired value 
    if (percent > 74) 
     // stop the loop 
     clearInterval(handler); 
}, 30);