マークアップとスクリプティング

wijsparkline ウィジェットの HTML マークアップは、次のようになります。

マークアップ	コードのコピー
<h3>Line</h3> <div id="wijsparklineDefault" style="height:50px;width:200px"> </div> <h3>Area</h3> <div id="wijsparklineArea" style="height:50px;width:200px"> </div>

次の jQuery スクリプトを使用して、ウィジェットを初期化できます。

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

スクリプト

コードのコピー

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

ここで説明しているマークアップおよびスクリプトの結果、次のようなウィジェットが作成されます。スパークラインにマウスポインタを合わせると、各データ点の値がツールチップとして表示されます。

関連トピック

参照