軸線の移動

「クイックスタート」の例を基に、valueAxis オプションを使用して、軸の下部に負の値を表示できます。また、origin オプションを使用することで、軸の値を設定できます。これはたとえば、売上ノルマに満たない数値を負の値として表示したいような場合に便利です。

注意: valueAxis オプションは、デフォルトの折れ線グラフに対しては効果がありません。したがって、このオプションを有効にするには、スパークラインのタイプを「縦棒」または「面」に設定する必要があります。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、valueAxis オプションを true に設定し、origin オプションを使用して軸の値を 10 に変更します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { $("#wijsparkline").wijsparkline({ valueAxis: true, origin: 10, 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,
        origin: 10,
        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 ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、10 未満のすべての値が軸の下部に表示されます。

関連トピック

参照