Gaugeをカスタマイズする

クイックスタートの例に基づき、labels、tickMajor、tickMinor、pointer、face、ranges の各オプションを使用して、マーカー、マーカーの色とグラデーション、ラベルテキストの回転を変更できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを次のスクリプトに置き換えます。このスクリプトは、ウィジェットで使用されるサイズ、値、アニメーションを設定し、ラベル、目盛りマーク、ポインタ、フェース、範囲の外観をカスタマイズします。また、wijlineargauge とスライダウィジェットを初期化し、スライダの値が変化したときに、wijlineargauge の値も変化するようにします。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#lineargauge1").wijlineargauge({ width: 400, height: 120, value: 70, max: 100, min: 0, animation: { enabled: true, duration: 400, easing: ">" }, labels: { style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMajor: { position: "inside", offset: -11, interval: 20, factor: 12, style: { fill: "#1E395B", stroke: "none", width: 2 } }, tickMinor: { position: "inside", offset: -11, visible: true, interval: 4, factor: 10, style: { fill: "#1E395B", stroke: "none", width: 1 } }, pointer: { shape: "rect", length: 0.6, style: { fill: "#1E395B", stroke: "#7BA0CC", "stroke-width": 1, opacity: 1 } }, face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": 2 } }, ranges: [{ startValue: 80, endValue: 100, //A ratio value that determines the location of the beginning of the range. startDistance: 0.85, //A ratio value that determines the location of the end of the range. endDistance: 0.85, startWidth: 0.5, endWidth: 0.5, style: { fill: "90-#3DA1D8-#3A6CAC", opacity: 1, stroke: "none" } }] }); $("#slider").slider({ value: $("#lineargauge1").wijlineargauge("option", "value"), change: function (event, ui) { $("#lineargauge1").wijlineargauge("option", "value", ui.value); } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
    $("#lineargauge1").wijlineargauge({
        width: 400,
        height: 120,
        value: 70,
        max: 100,
        min: 0,
        animation: {
            enabled: true,
            duration: 400,
            easing: ">"
        },
        labels: {
            style: {
                fill: "#1E395B",
                "font-size": 12,
                "font-weight": "800"
            }
        },
        tickMajor: {
            position: "inside",
            offset: -11,
            interval: 20,
            factor: 12,
            style: {
                fill: "#1E395B",
                stroke: "none",
                width: 2
            }
        },
        tickMinor: {
            position: "inside",
            offset: -11,
            visible: true,
            interval: 4,
            factor: 10,
            style: {
                fill: "#1E395B",
                stroke: "none",
                width: 1
            }
        },
        pointer: {
            shape: "rect",
            length: 0.6,
            style: {
                fill: "#1E395B",
                stroke: "#7BA0CC",
                "stroke-width": 1,
                opacity: 1
            }
        },
        face: {
            style: {
                fill: "270-#FFFFFF-#D9E3F0",
                stroke: "#7BA0CC",
                "stroke-width": 2
            }
        },
        ranges: [{
            startValue: 80,
            endValue: 100,
            //A ratio value that determines the location of the beginning of the range.
            startDistance: 0.85,
            //A ratio value that determines the location of the end of the range.
            endDistance: 0.85, 
            startWidth: 0.5,
            endWidth: 0.5,
            style: {
                fill: "90-#3DA1D8-#3A6CAC",
                opacity: 1,
                stroke: "none"
            }
        }]
    });
    $("#slider").slider({
        value: $("#lineargauge1").wijlineargauge("option", "value"),
        change: function (event, ui) {
            $("#lineargauge1").wijlineargauge("option", "value", ui.value);
        }
    });
});
</script>

HTML ファイルの <body> セクションで、基本的な <div> タグを次のマークアップに置き換えて、スライダウィジェットを追加します。

ドロップダウンからマークアップをコピーして、<body> セクション内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは、LinearGaugeSlider を使用して次のように表示されます。

関連トピック

参照