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
x
1
anychart.onDocumentReady(function () {
2
3
// create data set on our data
4
var dataSet = anychart.data.set([60]);
5
6
// set the gauge type
7
var gauge = anychart.gauges.circular();
8
9
// gauge settings
10
gauge.data(dataSet);
11
gauge.padding("10%");
12
gauge.startAngle(0);
13
gauge.sweepAngle(360);
14
15
// axis settings
16
var axis = gauge.axis();
17
axis.radius(95);
18
axis.width(1);
19
20
// scale settings
21
var scale = gauge.axis().scale();
22
scale.minimum(0);
23
scale.maximum(360);
24
var ticks = gauge.axis().scale().ticks();
25
ticks.interval(20);
26
var minorTicks = gauge.axis().scale().minorTicks();
27
minorTicks.interval(1);
28
29
// ticks settings
30
var axisTicks = gauge.axis().ticks();
31
axisTicks.enabled(true);
32
axisTicks.type("trapezium");
33
axisTicks.length(8);
34
35
// minor ticks settings
36
var axisMinorTicks = gauge.axis().minorTicks();
37
axisMinorTicks.enabled(true);
38
axisMinorTicks.length(1);
39
40
// knob
41
var knob = gauge.knob(0);
42
knob.verticesCount(15);
43
knob.verticesCurvature(.1);
44
45
// draw the chart
46
gauge.container("container");
47
gauge.draw();
48
});