方向-圓形-指南針

# FastWeb 方向-圓形-指南針

專案地址：https://github.com/Mikhus/canvas-gauges (opens new window)

指南針的儀表盤使用的是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>
    <script src="library/js/canvas-gauges-master/gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<canvas data-type="radial-gauge"
        data-width="500"
        data-height="500"
        data-value="89"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="false"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="plate"
        data-units=""
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="45"
        data-animate-on-init="true"
></canvas>

<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

</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

從上述的語言中，可以找到一個名為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>
    <script src="library/js/canvas-gauges-master/gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<canvas data-type="radial-gauge"
        data-width="500"
        data-height="500"
        data-value="param_value"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="false"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="plate"
        data-units=""
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="45"
        data-animate-on-init="true"
></canvas>

<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

</script>
</body>
</html>

上述模板內容已設定完成，可在JQuery元件的模板中匯入上述內容。

# 3.3. 設定參數

在參數界面中，設定上述參數，分別為其設定預設值：

# 3.4. 與資料庫欄位聯動

可以設定數據來源於資料庫欄位，按照以下的格式進行設定，下例以隨機數產生為例。

← 溫度-垂直-刻度計 3D物體實景-自轉瀏覽→