dn-gauge.js
Version:
Canvas gauge component
351 lines (301 loc) • 5.34 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Gauge.js demo page</h1>
<div class="table">
<div class="row">
<div class="cell celldemo">
<div id="demo1"></div>
</div>
<div class="cell cellcode">
<h3>Простой вызов без параметров</h3>
javascript:
<pre>gauge1 = new Gauge({},document.getElementById("demo1"));</pre>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="cell celldemo">
<div id="demo2"></div>
</div>
<div class="cell cellcode">
<h3>Пример из тестового задания</h3>
javascript:
<pre>
gauge2 = new Gauge({
width: 500,
height:500,
aperture: 240,
radius: 175,
areas:[
{
color: '#ffa500',
start: 150,
end: 190
},
{
color: 'red',
start: 190,
end: 210
}
],
values:[0,1,2,3,4,5,6],
angle: 2/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '18px Arial',
textColor: '#777',
arcWidth: 3
},
document.getElementById("demo2"));
</pre>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="cell celldemo">
<div id="demo3"></div>
</div>
<div class="cell cellcode">
<h3>"Вольтметр"</h3>
javascript:
<pre>
gauge3 = new Gauge({
aperture: 90,
radius: 100,
areas:[
{
color: 'red',
start: 135,
end: 145
}
],
values:[0,1,2,3,4,5,6,7,8,9,10],
angle: 1/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '10px Arial',
textColor: '#777',
arcWidth: 1,
arrowColor: 'lightgray',
},
document.getElementById("demo3"));
</pre>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="cell celldemo">
<div id="demo4"></div>
</div>
<div class="cell cellcode">
<h3>"Спидометр"</h3>
javascript:
<pre>
gauge4 = new Gauge({
aperture: 270,
radius: 100,
areas:[
{
color: 'green',
start: -45,
end: -18
},
{
color: 'limegreen',
start: -18,
end: 20
},
{
color: 'orange',
start: 180,
end: 198
},
{
color: 'red',
start: 198,
end: 225
}
],
values:[0, 'min', 20, 30, 40, 50, 60, 70, 80, 90, 'max'],
angle: 0.75,
scaleInside: true
},
document.getElementById("demo4"));
</pre>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="cell celldemo">
<div id="demo5"></div>
</div>
<div class="cell cellcode">
<h3>Инопланетное нечто</h3>
javascript:
<pre>
gauge5 = new Gauge({
aperture: 150,
radius: 100,
areas:[
{
color: '#eee',
start: 170,
end: 370
}
],
values:['£','¥','Δ','Ω','∑', '∴'],
angle: 0.75,
arcWidth: 10,
font: '16px Arial',
arrowColor: 'limegreen',
},
document.getElementById("demo5"));
</pre>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="cell celldemo">
<div id="demo6"></div>
</div>
<div class="cell cellcode">
<h3>Таймер</h3>
javascript:
<pre>
gauge6 = new Gauge({
aperture: 360,
radius: 50,
values:[6,7,8,9,10,11,12,1,2,3,4,5,''],
angle: 0.25,
arcWidth: 3,
arrowColor: '#000',
arcColor: '#000',
dotColor: '#000',
textColor: '#000'
},
document.getElementById("demo6"));
</pre>
</div>
<div class="clear"></div>
</div>
</div><!-- table -->
<script src="../gauge.min.js"></script>
<script>
gauge1 = new Gauge({},document.getElementById("demo1"));
gauge2 = new Gauge({
width: 500,
height:500,
aperture: 240,
radius: 175,
areas:[
{
color: '#ffa500',
start: 150,
end: 190
},
{
color: 'red',
start: 190,
end: 210
}
],
values:[0,1,2,3,4,5,6],
angle: 2/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '18px Arial',
textColor: '#777',
arcWidth: 3
},
document.getElementById("demo2"));
gauge3 = new Gauge({
aperture: 90,
radius: 100,
areas:[
{
color: 'red',
start: 135,
end: 145
}
],
values:[0,1,2,3,4,5,6,7,8,9,10],
angle: 1/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '10px Arial',
textColor: '#777',
arcWidth: 1,
arrowColor: 'lightgray',
},
document.getElementById("demo3"));
gauge4 = new Gauge({
aperture: 270,
radius: 100,
areas:[
{
color: 'green',
start: -45,
end: -18
},
{
color: 'limegreen',
start: -18,
end: 20
},
{
color: 'orange',
start: 180,
end: 198
},
{
color: 'red',
start: 198,
end: 225
}
],
values:[0, 'min', 20, 30, 40, 50, 60, 70, 80, 90, 'max'],
angle: 0.75,
scaleInside: true
},
document.getElementById("demo4"));
gauge5 = new Gauge({
aperture: 150,
radius: 100,
areas:[
{
color: '#eee',
start: 170,
end: 370
}
],
values:['£','¥','Δ','Ω','∑', '∴'],
angle: 0.75,
arcWidth: 10,
font: '16px Arial',
arrowColor: 'limegreen',
},
document.getElementById("demo5"));
gauge6 = new Gauge({
aperture: 360,
radius: 50,
values:[6,7,8,9,10,11,12,1,2,3,4,5,''],
angle: 0.25,
arcWidth: 3,
arrowColor: '#000',
arcColor: '#000',
dotColor: '#000',
textColor: '#000'
},
document.getElementById("demo6"));
</script>
</body>
</html>