多用途-半圓形-指針儀表盤2
# FastWeb 360度瀏覽-公轉視角-商品固定
圓形指針的儀表盤使用的是Canvas Gauges，這是一套豐富的JS儀表盤元件庫。
使用的半圓形指針儀表盤的樣式如下：
# 1. 下載示例
點選https://github.com/Mikhus/canvas-gauges/archive/refs/heads/master.zip (opens new window)以下載庫，建議將其中包含的內容解壓縮放置於FastWeb目錄的library/js資料夾中。
# 2. 確認參數
半圓形指針儀表盤的樣式內容如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<link rel="stylesheet" href="library/js/canvas-gauges-master/fonts/fonts.css">
<script src="library/js/canvas-gauges-master/gauge.min.js"></script>
</head>
<body style="background: #fff">
<canvas id="canvasPressure"></canvas>
<script>
var gaugePressure = new RadialGauge({
renderTo: 'canvasPressure',
width: 300,
height: 300,
units: "1010 hPa",
startAngle: 70,
ticksAngle: 220,
colorPlate: "#ffffff",
colorUnits: "#3CA7DB",
colorNumbers: "#3CA7DB",
needleType: "arrow",
needleStart: 0,
needleEnd: 75,
needleWidth: 4,
needleCircleSize: 10,
needleCircleInner: false,
needleCircleOuter: true,
needleShadow: false,
colorNeedle: "#3CA7DB",
colorNeedleEnd: "#2698CE",
colorNeedleCircleOuter: "#3CA7DB",
colorNeedleCircleOuterEnd: "#3CA7DB",
colorMajorTicks: [
"#A8D3D5",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#A8D3D5"
],
colorMinorTicks: "#ffffff",
minValue: 975,
maxValue: 1045,
majorTicks: [
"",
"980",
"",
"990",
"",
"1000",
"",
"1010",
"",
"1020",
"",
"1030",
"",
"1040",
""
],
minorTicks: "10",
strokeTicks: true,
highlights: [
{
"from": 974.75,
"to": 1045.25,
"color": "#A8D3D5"
}
],
highlightsWidth: 25,
numbersMargin: 12,
animation: true,
animationRule: "linear",
valueBox: false,
borders: false,
borderShadowWidth: 0,
value: 1024,
animateOnInit: true,
animatedValue: true
}).draw();
var timers = [];
function animateGauges() {
document.gauges.forEach(function (gauge) {
timers.push(setInterval(function () {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}
window.addEventListener('load', function () {
document.gauges.forEach(function (gauge) {
gauge.on('animate', function (percent, value) {
gauge.update({ units: parseInt(value, 10) + ' hPa' });
});
});
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
從上述的語言中，可以找到一個名為value的參數，其中得到的值就是半圓形儀表盤指針指向的數值。此處可為其設定參數值為param_value。
# 3. 修改模板
# 3.1. 本地化處理
上述模板已經將所需的檔案本地化處理，不需要額外進行本地化的相關設定。
# 3.2. 標記參數
將上述的value處后的值使用param_value來代替，替換后的內容如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<link rel="stylesheet" href="library/js/canvas-gauges-master/fonts/fonts.css">
<script src="library/js/canvas-gauges-master/gauge.min.js"></script>
</head>
<body style="background: #fff">
<canvas id="canvasPressure"></canvas>
<script>
var gaugePressure = new RadialGauge({
renderTo: 'canvasPressure',
width: 300,
height: 300,
units: "1010 hPa",
startAngle: 70,
ticksAngle: 220,
colorPlate: "#ffffff",
colorUnits: "#3CA7DB",
colorNumbers: "#3CA7DB",
needleType: "arrow",
needleStart: 0,
needleEnd: 75,
needleWidth: 4,
needleCircleSize: 10,
needleCircleInner: false,
needleCircleOuter: true,
needleShadow: false,
colorNeedle: "#3CA7DB",
colorNeedleEnd: "#2698CE",
colorNeedleCircleOuter: "#3CA7DB",
colorNeedleCircleOuterEnd: "#3CA7DB",
colorMajorTicks: [
"#A8D3D5",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#ffffff",
"#A8D3D5"
],
colorMinorTicks: "#ffffff",
minValue: 975,
maxValue: 1045,
majorTicks: [
"",
"980",
"",
"990",
"",
"1000",
"",
"1010",
"",
"1020",
"",
"1030",
"",
"1040",
""
],
minorTicks: "10",
strokeTicks: true,
highlights: [
{
"from": 974.75,
"to": 1045.25,
"color": "#A8D3D5"
}
],
highlightsWidth: 25,
numbersMargin: 12,
animation: true,
animationRule: "linear",
valueBox: false,
borders: false,
borderShadowWidth: 0,
value: param_value,
animateOnInit: true,
animatedValue: true
}).draw();
var timers = [];
function animateGauges() {
document.gauges.forEach(function (gauge) {
timers.push(setInterval(function () {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}
window.addEventListener('load', function () {
document.gauges.forEach(function (gauge) {
gauge.on('animate', function (percent, value) {
gauge.update({ units: parseInt(value, 10) + ' hPa' });
});
});
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
上述模板內容已設定完成，可在JQuery元件的模板中匯入上述內容。
# 3.3. 設定參數
在參數界面中，設定上述參數，分別為其設定預設值：
# 3.4. 與資料庫欄位聯動
可以設定數據來源於資料庫欄位，按照以下的格式進行設定，下例以隨機數產生為例。
