dn-gauge.js v0.0.1

Gauge.js

Pure Javascript компонент, отрисовывающий круговую шкалу через canvas. Без использования каких-либо библиотек, фреймворков, спрайтов - он весит всего 2.58 Кб. Имеет множество настроек для кастомизации внешнего вида, прост в использовании.

Демонстрация работы

Установка

Скачайте gauge.min.js или полную версию gauge.js и вставьте при помощи тега script:

<script src="gauge.min.js"></script>

Использование

Пример вызова без параметров:

gauge = new Gauge({},document.getElementById("container"));

Вызов с параметрами:

gauge = 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("container"));

Параметры