| MVC Classic ウィジェット > Gauge ウィジェット > Wijradialgauge |
wijradialgauge ウィジェットでは、ダイヤルや速度計を含む、一般的な放射状ゲージを作成できます。単純なオプションを使用し、開始と掃引角度、目盛、範囲、およびポインタをカスタマイズします。wijradialgauge ウィジェットは、jquery.wijmo.wijradialgauge.js ライブラリによって作成されます。
wijradialgauge ウィジェットの作成に使用されるマークアップは次のようになります。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="gauge"></div> |
|
次のスクリプトは wijradialgauge ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<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: {
"height": "3px",
"width": "10px",
fill: "#1E395B",
stroke: "#E7EFF8"
},
interval: 5,
visible： true
},
tickMajor: {
position: "inside",
offset: 27,
style: {
fill: "#1E395B",
"height": "4px",
"width": "20px",
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>
|
|
wijradialgauge の詳細については、Wijmo 製品マニュアルをご覧ください。