amcharts上的值之間的動畫過渡svg條形圖

Question

我有一個使用'amcharts'插件構建的條形圖。

選擇下拉菜單項時，圖形更新其值，

我試圖讓圖形動畫值之間的過渡時，它的變化，目前它要麼將使整個動畫和動畫'0'，或者如果animateAgain（）被註釋掉（js中的第142行），它會跳轉到新值。

// Animate between values instead of resetting animation? 
chart.animateAgain(); // Resets animation 
chart.validateData(); // redraws the chart with new data 

我搜索的文檔和谷歌，但無法找到任何解決這個問題，任何人有在正確的方向任何意見或指針：該值已被更新後，該代碼被稱爲？可能嗎？這裏的codepen：

http://codepen.io/bananafarma/pen/yewbJQ

乾杯！

Answer 1

您可以使用amCharts自己的Animate plugin。

它增加了一個新的方法來圖表對象animateData()。

function updateGraph() { 
    var newData = chart.dataProvider.slice(); 
    if(document.getElementById('data-set').value == 1) { 
    newData[0].gain= 3.8; 
    newData[1].gain= 8.5; 
    newData[2].gain= 3; 
    newData[3].gain= 1.9; 
    } 
    else if (document.getElementById('data-set').value == 2) { 
    console.log("yo"); 
    newData[0].gain= 2.6; 
    newData[1].gain= 8.6; 
    newData[2].gain= 13.8; 
    newData[3].gain= 4; 
    } 
    else if (document.getElementById('data-set').value == 3) { 
    newData[0].gain= 4.8; 
    newData[1].gain= 10.6; 
    newData[2].gain= 15.9; 
    newData[3].gain= 16; 
    } 

    // use Animate plugin 
    chart.animateData(newData, { duration: 1000 }); 

} 

這是您的更新working demo。