チャート種類の変更

「クイックスタート」の例を基に、type オプションを使用して、チャートの種類を変更できます。デフォルトのスパークラインは折れ線グラフですが、面グラフや縦棒グラフに変更できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、チャートタイプを面グラフに変更し、valueAxis オプションを true に設定して軸を表示し、正の値と負の値を明確化します。

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

スクリプト

コードのコピー

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

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、折れ線と軸に挟まれた領域が塗りつぶされています。

関連トピック

参照