-
Notifications
You must be signed in to change notification settings - Fork 1
/
custom-theme.html
64 lines (57 loc) · 1.69 KB
/
custom-theme.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: Custom Theme | Revolve.js</title>
<!-- Include the standalone version of Revolve.js since we don't need any of
the predefined themes. -->
<script src="../dist/revolve.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The canvas that will become our gauge -->
<canvas width="512" height="512"></canvas>
<!-- Our bottom-of-page script. We could also move this to the <head>. -->
<script type="text/javascript">
// Define a custom theme
let customTheme = {
name: 'unitless',
axes: {
TEN: {
name: 'TEN',
pointA: { angle: 225, value: 0 },
pointB: { angle: 135, value: 10 }
}
},
layers: {
ticks: {
type: 'radial', content: 'ticks', layout: 'hour', color: '#DD2323',
width: 8, degrees: 27, length: 40, start: 225,
include: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
},
arc: {
type: 'arc', radius: 226,
border: { width: 10, color: '#DD2323' },
start: 225, degrees: 135
},
pointer: {
type: 'arm', axis: 'TEN', color: '#DD2323',
layers: [{
type: 'path',
points: [ { x: -2, y: -212 }, { x: -5, y: 65 },
{ x: 5, y: 65 }, { x: 2, y: -212 } ]
}]
},
pin: {
type: 'circle', radius: 26, color: 'white',
border: { color: '#DD2323', width: 6 }
}
}
};
// Initialize the gauge with the custom theme
Revolve.gauge(
document.querySelector('canvas').getContext('2d'),
{ theme: customTheme }
);
</script>
</body>
</html>