2

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 プロパティを介して) 提供するものであるかどうか、およびそれを実装するにはどうすればよいかを知りたいです。明示的なサポートに失敗した場合、完全なデータ更新 (つまり、一連の.setData())。それと、CSS アニメーションでそれができるなら、それもいいと思います。

(フォールバックを検討する場合、jQuery 1.8.3 とコア jQueryUI 1.8.6 を使用しています)

どんな助けでも大歓迎です。

4

1 に答える 1

1

既存のポイントでPoint.updateメソッドを使用する方が効率的です。この方法では、すべてのポイントを削除して後で設定するのではなく、ポイントのみが更新されます。

そうは言っても、コード例を
関数step（）{に変更しました。

    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-31T15:11:31.890 に答える