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
4
var data = [150, 250, 300, 170];
5
6
// set the gauge type
7
var gauge = anychart.gauges.tank();
8
9
// set the data for the gauge
10
gauge.data(data);
11
12
// create the first pointer (tank)
13
var tank = gauge.tank(0);
14
15
// set the width and offset of the tank pointer (both as percentages of the gauge width)
16
tank.width('10%');
17
tank.offset('10%');
18
19
// create the second pointer (marker)
20
var marker = gauge.marker(1);
21
22
// set the marker type
23
marker.type('triangleLeft');
24
25
// set the zIndex of the marker
26
marker.zIndex(10);
27
28
// set the width and offset of the marker pointer (both as percentages of the gauge width)
29
marker.width('2.5%');
30
marker.offset('23%');
31
32
// configure the third pointer (bar)
33
var bar_1 = gauge.bar(2);
34
bar_1.offset('22%');
35
bar_1.width('2%');
36
37
// configure the fourth pointer (bar)
38
var bar_2 = gauge.bar(3);
39
bar_2.offset('26%');
40
bar_2.width('2%');
41
42
// configure the axis
43
var axis = gauge.axis();
44
axis.offset('-1%');
45
46
// set the container id
47
gauge.container('container');
48
49
// initiate drawing the gauge
50
gauge.draw();
51
});