氣壓-圓形-指針氣壓計1
# FastWeb 氣壓-圓形-指針氣壓計1
圓形指針氣壓計儀表盤使用的是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>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<canvas data-type="radial-gauge"
data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
data-type="radial-gauge"
data-title="Barometer"
data-units="mBar"
data-width="200"
data-height="200"
data-value-int="0"
data-value-dec="0"
data-width="200"
data-height="200"
data-min-value="950"
data-max-value="1050"
data-highlights="false"
data-color-stroke-ticks="#f00"
data-value="1020"
></canvas>
<script async src="library/js/canvas-gauges-master/gauge.min.js"></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
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
從上述的語言中，可以找到一個名為data-value的參數，其中得到的值就是氣壓計儀表盤指針指向的數值。此處可為其設定參數值為param_value。
# 3. 修改模板
# 3.1. 本地化處理
上述模板已經將所需的檔案本地化處理，不需要額外進行本地化的相關設定。
# 3.2. 標記參數
將上述的data-value處后的值使用param_value來代替，替換后的內容如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<canvas data-type="radial-gauge"
data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
data-type="radial-gauge"
data-title="Barometer"
data-units="mBar"
data-width="200"
data-height="200"
data-value-int="0"
data-value-dec="0"
data-width="200"
data-height="200"
data-min-value="950"
data-max-value="1050"
data-highlights="false"
data-color-stroke-ticks="#f00"
data-value="param_value"
></canvas>
<script async src="library/js/canvas-gauges-master/gauge.min.js"></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
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
# 3.3. 設定參數
在參數界面中，設定上述參數，分別為其設定預設值：
# 3.4. 與資料庫欄位聯動
可以設定數據來源於資料庫欄位，按照以下的格式進行設定，下例以隨機數產生為例。
