HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
var darkAccentColor = '#545f69';
2
var compassData = [0, 45, 90, 135, 180, 225, 270, 315];
3
function NeedleFill(needle) {
4
var angle = compassData[needle.dataIndex()];
5
if (angle === 0) angle -= 180;
6
if (angle === 45) angle -= 270;
7
if (angle === 135) angle -= 90;
8
if (angle === 180) angle -= 180;
9
if (angle === 225) angle -= 270;
10
if (angle === 315) angle -= 90;
11
return {
12
keys: ['0.49 ' + darkAccentColor, '0.5 #4C565E', '0.51 white'],
13
angle: angle
14
};
15
}
16
17
var makeNeedle = function (needle, size) {
18
if (size === 'big') var endRadius = 87;
19
else endRadius = 45;
20
needle
21
.stroke('1 ' + darkAccentColor)
22
.fill(NeedleFill(needle))
23
.startRadius(0)
24
.middleRadius(25)
25
.endRadius(endRadius)
26
.startWidth(0)
27
.middleWidth(10.32)
28
.endWidth(0);
29
};
30
31
anychart.onDocumentReady(function () {
32
var gauge = anychart.gauges.circular();
33
gauge.fill('white').padding(0).margin(50).stroke(null);
34
gauge.data(compassData);
35
gauge
36
.axis()
37
.scale()
38
.minimum(0)
39
.maximum(360)
40
.ticks({ interval: 90 })
41
.minorTicks({ interval: 45 });
42
gauge
43
.axis()
44
.startAngle(0)
45
.fill(null)
46
.width(2)
47
.radius(100)
48
.sweepAngle(360);
49
gauge.axis().ticks(null);
50
gauge
51
.axis()
52
.labels()
53
.fontSize(20)
54
.position('inside')
55
.format(function () {
56
if (this.value === 0) return 'N';
57
if (this.value === 90) return 'E';
58
if (this.value === 180) return 'S';
59
if (this.value === 270) return 'W';
60
return this.value;
61
});
62
63
gauge
64
.axis(1)
65
.startAngle(0)
66
.fill(null)
67
.width(1)
68
.radius(50)
69
.sweepAngle(360);
70
gauge
71
.axis(1)
72
.scale()
73
.minimum(0)
74
.maximum(360)
75
.ticks({ interval: 45 })
76
.minorTicks({ interval: 15 });
77
gauge.axis(1).ticks(null);
78
gauge
79
.axis(1)
80
.minorTicks()
81
.enabled(true)
82
.length(20)
83
.stroke('2 ' + darkAccentColor)
84
.position('outside')
85
.type(function (path, x, y, radius) {
86
path
87
.moveTo(x, y - radius / 2)
88
.lineTo(x, y + radius / 2)
89
.close();
90
return path;
91
});
92
gauge
93
.axis(1)
94
.labels()
95
.fontSize(20)
96
.padding(2)
97
.position('outside')
98
.format(function () {
99
if (
100
this.value === 0 ||
101
this.value === 90 ||
102
this.value === 180 ||
103
this.value === 270
104
) { return ''; }
105
if (this.value === 45) return 'ne';
106
if (this.value === 135) return 'se';
107
if (this.value === 225) return 'sw';
108
if (this.value === 315) return 'nw';
109
return this.value;
110
});
111
makeNeedle(gauge.needle(), 'big');
112
makeNeedle(gauge.needle(1), 'small');
113
makeNeedle(gauge.needle(2), 'big');
114
makeNeedle(gauge.needle(3), 'small');
115
makeNeedle(gauge.needle(4), 'big');
116
makeNeedle(gauge.needle(5), 'small');
117
makeNeedle(gauge.needle(6), 'big');
118
makeNeedle(gauge.needle(7), 'small');
119
gauge
120
.cap()
121
.radius('10%')
122
.fill('white')
123
.stroke('5 ' + darkAccentColor);
124
125
gauge.container('container');
126
gauge.draw();
127
});