帶有highcharts餅圖的掃描動畫

我試圖將數據更新動畫到使用Highcharts構建的餅圖。帶有highcharts餅圖的掃描動畫

下面是我砍死在一起，展示了動畫我試圖產生一種非常原始的版本演示：http://jsfiddle.net/HsspB/

的黑客實現與setInterval的動畫：

var iTimer = setInterval(step, 25); 
    function step() { 
     iCurrent = Math.min(iCurrent+3, iFinal); 
     tChart.series[0].setData(
      [ 
       { 'y': iCurrent, 'color': '#f2b000', 'name': null }, 
       { 'y': 100-iCurrent, 'color': '#fae09e', 'name': null } 
      ], 
      true 
     ); 
     if(iCurrent === iFinal) clearInterval(iTimer); 
    }

的因爲我沒有使用確切的代碼，因爲它顯然是一種黑客行爲，而且看起來Highcharts必須已經通過它的API來實現這一點，只要我知道如何表達它。

黑客完全是程序性的（而不是聲明性的），這意味着我必須實際制定和數學建模步驟，而不是指定持續時間，轉換類型和緩動功能。

我想知道這是Highcharts提供的功能（大概是通過chart.animation屬性），以及我如何去實現它。如果沒有明確的支持，我會對有關如何推廣我自己的方法的建議感興趣，包括Highcharts API的其他相關部分是否更適合這種工作，而不是依賴完整的數據更新（即系列.setData（））。嘿 - 如果我可以通過CSS動畫來做，我也很酷。

（在考慮回退，我使用jQuery 1.8.3和核心jQueryUI的1.8.6）

任何幫助表示讚賞。

來源

2013-01-17 Tom

在已有的點上使用Point.update方法更有效。使用此方法，只更新點，而不是刪除所有點並在之後進行設置。

與此說，我修改了代碼示例
功能步驟（）{

iCurrent = Math.min(iCurrent + 3, iFinal); 
    y = tChart.series[0].data[1].y; 
    tChart.series[0].data[1].update(y + 3, true, { 
     duration: 1500, 
     easing: 'swing' 
    }); 
    console.log(tChart.series[0].data[1]); 

    if (iCurrent === iFinal) clearInterval(iTimer); 
}

又見一個工作示例http://highcharts.com/jsbin/utifem/7/edit

來源

2013-01-31 15:11:31

謝謝！最後，我只是更新了我所有的series.setData調用，以使其成爲series.data [i] .update調用;你的演示腳本是有啓發性的，但不是我想要的。我認爲highcharts將緩動功能應用於比我想要的更多的幾何體。 – Tom

帶有highcharts餅圖的掃描動畫

回答

相關問題