多用途-半圆形-指针仪表盘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>
<link rel="stylesheet" href="library/js/canvas-gauges-master/fonts/fonts.css">
<script src="library/js/canvas-gauges-master/gauge.min.js"></script>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<canvas id="canvas-id"></canvas>
<script>
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 300,
height: 300,
units: "",
title: "",
startAngle: 90,
ticksAngle: 180,
colorPlate: "#ffffff",
colorUnits: "#3CA7DB",
colorNumbers: "#534638",
colorNeedle: "#8E7860",
colorNeedleEnd: "#8E7860",
colorNeedleCircleOuter: "#8E7860",
colorNeedleCircleOuterEnd: "#8E7860",
colorNeedleShadowUp: "#8E7860",
colorNeedleShadowDown: "#8E7860",
colorMajorTicks: ["#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB"],
colorMinorTicks: "#EBEBEB",
minValue: 0,
maxValue: 100,
majorTicks: ["","20","40","60","80",""],
minorTicks: "2",
strokeTicks: true,
highlights: [
{
"from": -0.25,
"to": 39.99,
"color": "#FF9488"
},
{
"from": 39.99,
"to": 59.99,
"color": "#8FB9BD"
},
{
"from": 59.99,
"to": 100.25,
"color": "#B1B9CB"
}
],
highlightsWidth: 25,
numbersMargin: 12,
animation: true,
animationRule: "linear",
animatedValue: true,
borders: false,
valueBox: false,
needleType: "arrow",
needleEnd: 65,
needleWidth: 4,
needleCircleSize: 10,
needleCircleInner: false,
needleCircleOuter: true,
needleShadow: false,
borderShadowWidth: 0
}).draw();
gauge.value = 48;
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
85
86
87
88
89
90
91
92
93
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
从上述的语言中，可以找到一个名为gauge.value的参数，其中得到的值就是半圆形仪表盘指针指向的数值。此处可为其设置参数值为param_value。
# 3. 修改模板
# 3.1. 本地化处理
上述模板已经将所需的文件本地化处理，不需要额外进行本地化的相关设置。
# 3.2. 标记参数
将上述的gauge.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>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<canvas id="canvas-id"></canvas>
<script>
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 300,
height: 300,
units: "",
title: "",
startAngle: 90,
ticksAngle: 180,
colorPlate: "#ffffff",
colorUnits: "#3CA7DB",
colorNumbers: "#534638",
colorNeedle: "#8E7860",
colorNeedleEnd: "#8E7860",
colorNeedleCircleOuter: "#8E7860",
colorNeedleCircleOuterEnd: "#8E7860",
colorNeedleShadowUp: "#8E7860",
colorNeedleShadowDown: "#8E7860",
colorMajorTicks: ["#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB"],
colorMinorTicks: "#EBEBEB",
minValue: 0,
maxValue: 100,
majorTicks: ["","20","40","60","80",""],
minorTicks: "2",
strokeTicks: true,
highlights: [
{
"from": -0.25,
"to": 39.99,
"color": "#FF9488"
},
{
"from": 39.99,
"to": 59.99,
"color": "#8FB9BD"
},
{
"from": 59.99,
"to": 100.25,
"color": "#B1B9CB"
}
],
highlightsWidth: 25,
numbersMargin: 12,
animation: true,
animationRule: "linear",
animatedValue: true,
borders: false,
valueBox: false,
needleType: "arrow",
needleEnd: 65,
needleWidth: 4,
needleCircleSize: 10,
needleCircleInner: false,
needleCircleOuter: true,
needleShadow: false,
borderShadowWidth: 0
}).draw();
gauge.value = param_value;
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
85
86
87
88
89
90
91
92
93
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
上述模板内容已设置完成，可在JQuery组件的模板中导入上述内容。
# 3.3. 设置参数
在参数界面中，设置上述参数，分别为其设置默认值：
# 3.4. 与数据库字段联动
可以设置数据来源于数据库字段，可留空表示设置不使用数据库字段。