HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
44
1
anychart.onDocumentReady(function() {
2
3
// create data set
4
var dataSet = anychart.data.set([81, 34.5]);
5
6
// set the gauge type
7
var gauge = anychart.gauges.circular();
8
9
// set the padding
10
gauge.data(dataSet).padding("4%");
11
12
// configure the scale
13
var scale = gauge.axis().scale();
14
scale.minimum(0)
15
.maximum(100)
16
.ticks()
17
.interval(10);
18
19
// configure masjor ticks on the axis
20
var axis = gauge.axis();
21
axis.ticks()
22
.fill("white")
23
.stroke("#888")
24
.type("trapezoid")
25
.length(20);
26
27
// configure minor ticks on the axis
28
axis.minorTicks()
29
.enabled(true)
30
.fill("white")
31
.stroke("#ccc")
32
.type("trapezoid")
33
.length(10);
34
35
// configure the bar presenting data
36
gauge.bar(0)
37
.position("i")
38
.fill("#F0673B .9")
39
.stroke("#F0673B")
40
.radius(80);
41
42
// initiate drawing the gauge
43
gauge.container("container").draw();
44
});