アニメーションの変更

「クイックスタート」の例を基に、animation オプションの duration および easing 属性を使用して、ページ上にスパークラインをどのように描画するかを変更できます。あるいは、animation オプションの enabled 属性を false に設定すると、スパークラインは画像としてページ上に表示されます。アニメーションは使用されず、全体が一度に描画されます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、チャートタイプを縦棒に変更し、アニメーションの再生時間を 4 秒（デフォルトの 2 倍）に変更します。また、easing オプションを使用して、描画完了までに縦棒が何度か弾むアニメーションを表示します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { $("#wijsparkline").wijsparkline({ animation: { duration: 4000, easing: "easeOutBounce" }, data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8], type: "column" }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
$(document).ready(function () {
    $("#wijsparkline").wijsparkline({
        animation: {
            duration: 4000,
            easing: "easeOutBounce"
        },
        data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8],
        type: "column"
    });
});
});
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。フレームをリロードし、アニメーションを再確認してください。

関連トピック

参照