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

wijradialgauge のマークアップは次のようになります。

マークアップ	コードのコピー
<div id="gauge"></div>

すべてのオプションをカスタマイズする次の jQuery スクリプトを使用して、ウィジェットを初期化できます。

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startAngle: -45, sweepAngle: 270, radius: "auto", islogarithmic: false, origin: { x: 0.5, y: 0.5 }, labels: { offset: 27, style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMinor: { position: "inside", offset: 30, style: { "height": 3, "width": 10, fill: "#1E395B", stroke: "#E7EFF8" }, interval: 5, visible: true }, tickMajor: { position: "inside", offset: 27, style: { fill: "#1E395B", "height": 4, "width": 20, stroke: "#E7EFF8", "stroke-width": "1.5" }, interval: 25, visible: true }, ranges: [{ startWidth: 2, endWidth: 5, startValue: 0, endValue: 10, startDistance: 1, endDistance: 0.98, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" } }, { startWidth: 5, endWidth: 20, startValue: 10, endValue: 125, startDistance: 0.98, endDistance: 0.9, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": "0" } }, { startWidth: 20, endWidth: 25, startValue: 125, endValue: 150, startDistance: 0.9, endDistance: 0.86, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" } }], face: { style: { fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" } }, pointer: { length: 0.8, offset: 0, shape: "rect", width: 6, style: { fill: "#1E395B", stroke: "#1E395B" } }, cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" } } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
            $(document).ready(function () {
    $("#gauge").wijradialgauge({
        value: 100,
        max: 150,
        min: 0,
        startAngle: -45,
        sweepAngle: 270,
        radius: "auto",
        islogarithmic: false,
        origin: {
            x: 0.5, y: 0.5
        },
        labels: {
            offset: 27, 
            style: {
                fill: "#1E395B",
                "font-size": 12,
                "font-weight": "800"
            }
        },
        tickMinor: {
            position: "inside",
            offset: 30,
            style: {
                "height": 3,
                "width": 10,
                fill: "#1E395B",
                stroke: "#E7EFF8"
            },
            interval: 5,
            visible: true
        },
        tickMajor: {
            position: "inside",
            offset: 27,
            style: {
                fill: "#1E395B",
                "height": 4,
                "width": 20,
                stroke: "#E7EFF8",
                "stroke-width": "1.5"
            },
            interval: 25,
            visible: true
        },
        ranges: [{
            startWidth: 2,
            endWidth: 5,
            startValue: 0,
            endValue: 10,
            startDistance: 1,
            endDistance: 0.98,
            style: {
                fill: "#7BA0CC",
                stroke: "#7BA0CC",
                "stroke-width": "0"
            }
        }, {
            startWidth: 5,
            endWidth: 20,
            startValue: 10,
            endValue: 125,
            startDistance: 0.98,
            endDistance: 0.9,
            style: {
                fill: "0-#B4D5F0-#B4D5F0",
                stroke: "#FFFFFF",
                "stroke-width": "0"
            }
        }, {
            startWidth: 20,
            endWidth: 25,
            startValue: 125,
            endValue: 150,
            startDistance: 0.9,
            endDistance: 0.86,
            style: {
                fill: "#7BA0CC",
                stroke: "#7BA0CC",
                "stroke-width": "0"
            }
        }],
        face: {
            style: {
                fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0",
                stroke: "#7BA0CC",
                "stroke-width": "4"
            }
        },
        pointer: {
            length: 0.8,
            offset: 0,
            shape: "rect",
            width: 6,
            style: {
                fill: "#1E395B",
                stroke: "#1E395B"
            }
        },
        cap: {
            radius: 10,
            style: {
                fill: "#1E395B",
                stroke: "#1E395B"
            }
        }
    });
});   
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。

関連トピック

参照