seriesTransition オプション

seriesList データが変化するときに使用するアニメーションオブジェクトを作成します。これにより、同じ系列のデータの変化を視覚的に表示できます。

デフォルト値: {enabled:true, duration:400, easing: "easeInCubic"}

シンタックス

Javascript (Usage)
$(function () { //値を取得する var returnsValue; //タイプ： wijmo.chart.chart_animation returnsValue = $(".selector").wijbarchart("option", "seriesTransition"); //値を設定します var newValue; //タイプ： wijmo.chart.chart_animation $(".selector").wijbarchart("option", "seriesTransition", newValue); });

Javascript (Usage)

$(function () {
    
    //値を取得する
    var returnsValue; //タイプ： wijmo.chart.chart_animation
    returnsValue = $(".selector").wijbarchart("option", "seriesTransition");
    
    //値を設定します
    var newValue; //タイプ： wijmo.chart.chart_animation
    $(".selector").wijbarchart("option", "seriesTransition", newValue);
        
});

Javascript (Specification)
var seriesTransition : chart_animation;

使用例

以下のコードは、ランダムデータを表示するチャートを作成します。以下の 2 番目のコードスニペットで作成されたボタンをクリックすると、ランダムデータが再生成されます。このコードを HTML ページのセクションに貼り付け、さらにその下のコードも同じセクションに貼り付けてから、ブラウザーでページを開いてボタンをクリックすると、seriesTransition アニメーションは表示されます。データが変化しなかった系列ではアニメーションが表示されない点に注意してください。

Javascript

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [createRandomSeriesList("2013")],
            seriesTransition:{ 
                duration: 800,
                easing: "easeOutBounce"
            }
        });
    });
    function reload() {
        $("#wijbarchart").wijbarchart("option", "seriesList", [createRandomSeriesList("2013")]);
    }
 
    function createRandomSeriesList(label) {
        var data = [],
            randomDataValuesCount = 12,
            labels = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"],
            idx;
        for (idx = 0; idx < randomDataValuesCount; idx++) {
            data.push(Math.round(Math.random() * 100));
        }
        return {
            label: label,
            legendEntry: false,
            data: { x: labels, y: data }
        };
    }
</script>

Paste the following code into the section of your HTML page to create the chart and the button.

Javascript

<div id="wijbarchart" style="width: 500px; height: 250px; border: 2px solid grey"></div>
<input type="button" value="Reload Random Data" onclick="reload()" />

解説

プログラムコードによってこのアニメーションを無効にするには、以下のようなコードを使用します。

seriesTransition: {enabled: false}

注: このアニメーションは、ページを最初にロードしたとき、またはページを再ロードしたときには実行されません。データが変化したときにだけ実行されます。

関連トピック

参照