データオブジェクト配列の使用

「クイックスタート」の例を基に、seriesList オプションの bind 属性を使用して、さらに複雑なデータオブジェクト配列を使用し、データフィールドを指定できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトでは、データオブジェクトの配列を使用しますが、個々のオブジェクトは名前とスコア値を保持しています。data オプション内で配列を指定し、seriesList オプション内で score フィールドをバインドします。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { var data = [{ name: "Januray", score: 73 }, { name: "February", score: 95 }, { name: "March", score: 89 }, { name: "April", score: 66 }, { name: "May", score: 50 }, { name: "June", score: 65 }, { name: "July", score: 70 }, { name: "August", score: 43 }, { name: "September", score: 65 }, { name: "October", score: 27 }, { name: "November", score: 77 }, { name: "December", score: 58 }]; $("#wijsparkline").wijsparkline({ data: data, seriesList: [{ bind: "score" }] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
    $(document).ready(function () {
        var data = [{ name: "Januray", score: 73 }, { name: "February", score: 95 }, { name: "March", score: 89 },
            { name: "April", score: 66 }, { name: "May", score: 50 }, { name: "June", score: 65 },
            { name: "July", score: 70 }, { name: "August", score: 43 }, { name: "September", score: 65 },
            { name: "October", score: 27 }, { name: "November", score: 77 }, { name: "December", score: 58 }];
        $("#wijsparkline").wijsparkline({
            data: data,
            seriesList: [{
                bind: "score"
            }]
        });
    });
});
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、バインドされた値が単純な折れ線スパークラインに表示されます。

関連トピック

参照