| MVC Classic ウィジェット > Gauge ウィジェット > Wijlineargauge > Wijlineargauge チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、線形ゲージに表示されるコンテンツを追加するマークアップを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。
以下の手順を実行します。
| ソースビュー |
コードのコピー
|
|---|---|
<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：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。