手順 2：ウィジェットの初期化

前の手順では、線形ゲージに表示されるコンテンツを追加するマークアップを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。

以下の手順を実行します。

前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力し、wijlineargauge ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#gauge1").wijlineargauge({ width: 400, height: 100, value: 50, max: 100, min: 0, labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800" } }, tickMajor: { position: "inside", offset: -11, interval: 20, factor: 12, style: { fill: "#1E395B", stroke: "none" } }, tickMinor: { position: "inside", offset: -11, visible： true, interval: 4, factor: 10, style: { fill: "#1E395B", stroke: "none" } }, pointer: { shape: "rect", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B", } }, face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" } }, ranges: [{ startValue: 20, endValue: 80, startDistance: 0.85, //比率値は範囲の開始値の位置を決定します。 endDistance: 0.85, //比率値は範囲の終了値の位置を決定します。 startWidth: 0.5, endWidth: 0.5, style: { fill: "90-#3DA1D8-#3A6CAC", stroke: "none" } }] }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
         $("#gauge1").wijlineargauge({
width: 400,
height: 100,
value: 50,
max: 100,
min: 0,
labels: {
style: {
                     fill: "#1E395B",
"font-size": "12pt",
                     "font-weight": "800"
                 }
             },             
             tickMajor: {
position: "inside",
offset: -11,
                 interval: 20,
                 factor: 12,
style: {
                     fill: "#1E395B",
stroke: "none"
                 }
             },
             tickMinor: {
position: "inside",
offset: -11,
visible： true,
                 interval: 4,
                 factor: 10,
style: {
                     fill: "#1E395B",
stroke: "none"
                 }
             },
             pointer: {
                 shape: "rect",
                 length: 0.5,
style: {
                     fill: "#1E395B",
stroke: "#1E395B",
                 }
             },
             face: {
style: {
                     fill: "270-#FFFFFF-#D9E3F0",
stroke: "#7BA0CC",
                     "stroke-width": "4"
                 }
             },
             ranges: [{
                 startValue: 20,
                 endValue: 80,
                 startDistance: 0.85, 
                        //比率値は範囲の開始値の位置を決定します。
                 endDistance: 0.85, 
                        //比率値は範囲の終了値の位置を決定します。
                 startWidth: 0.5,
                 endWidth: 0.5,
style: {
                     fill: "90-#3DA1D8-#3A6CAC",
stroke: "none"
                 }
             }]
         });
     });
    </script>

このスクリプトはウィジェットを初期化します。

アプリケーションを作成し、wijlineargauge ウィジェットを追加および初期化しました。次の手順　「手順 3：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。