| MVC Classic ウィジェット > Gauge ウィジェット > Wijradialgauge > Wijradialgauge チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、放射状ゲージに表示されるコンテンツを追加するマークアップを追加しました。この手順では、ウィジェットを初期化するために必要な 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,//4F6B82
style: {
fill: "#1E395B",
"font-size": "12pt",
"font-weight": "800"
}
},
tickMinor: {
position: "inside",
offset: 30,
style: {
fill: "#1E395B",
stroke: "#E7EFF8"
},
interval: 5,
visible： true
},
tickMajor: {
position: "inside",
offset: 27,
style: {
fill: "#1E395B",
stroke: "#E7EFF8",
"stroke-width": "1.5"
},
interval: 25,
visible： true
},
ranges: [
{
startWidth: 2,
endWidth: 5,
startValue: 0,
endValue: 10,
startDistance: 0.6,
endDistance: 0.58,
style: {
fill: "#7BA0CC",
stroke: "#7BA0CC",
"stroke-width": "0"
}
},
{
startWidth: 5,
endWidth: 20,
startValue: 10,
endValue: 125,
startDistance: 0.58,
endDistance: 0.54,
style: {
fill: "0-#B4D5F0-#B4D5F0",
stroke: "#FFFFFF",
"stroke-width": "0"
}
},
{
startWidth: 20,
endWidth: 25,
startValue: 125,
endValue: 150,
startDistance: 0.54,
endDistance: 0.5,
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>
|
|
このスクリプトはウィジェットを初期化します。
アプリケーションを作成し、wijradialgauge ウィジェットを追加および初期化しました。次の手順 「手順 3：プロジェクトの実行」 では、ウィジェットの実行時のインタラクティブ操作を表示します。