負の値に特別な書式の適用

全て展開

すべて折りたたむ

「クイックスタート」の例を基に、valueAxis オプションを使用して、軸の下部に負の値を表示できます。また、seriesStyles オプションを使用して、縦棒の色を変更することもできます。

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

valueAxis オプションを true に設定し、正の値と負の値を軸の上下に区分します。
origin オプションを 0 に設定します（デフォルトでは最大値と最小値の中間値）。
type オプションを「column」に設定します。このタイプは、negStyle および zeroStyle 属性をサポートする唯一のタイプです。
seriesStyles オプションの設定により、縦棒の色（fill）を緑に、負の値に対応する縦棒の色（negStyle）を黄に、ゼロ値（zeroStyle）を赤に、それぞれ設定します。

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

スクリプト

コードのコピー

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

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。負の値は軸の下部に黄色で表され、1 つのゼロ値が軸上に赤色で表されています。

関連トピック

参照