Skip to content

Instantly share code, notes, and snippets.

@dmitrylebedev
Last active July 29, 2016 08:17
Show Gist options
  • Save dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a to your computer and use it in GitHub Desktop.
Save dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a to your computer and use it in GitHub Desktop.
Canvas diagram
$(function(){
var elements = document.querySelectorAll('.js-chart'),
el = [].slice.call(elements);
el.forEach(function (item, i) {
var options = {
value: item.getAttribute('data-value') || 3,
size: item.getAttribute('data-size') || 128,
lineWidth: item.getAttribute('data-line') || 10,
rotate: item.getAttribute('data-rotate') || 0,
max: item.getAttribute('data-max') || 100,
units: item.getAttribute('data-units') || "%"
};
var canvas = document.createElement('canvas');
var value = document.createElement('span'); //блок, для значений диаграммы
var units = document.createElement('span'); //блок, для единиц измерения
value.textContent = options.value; //записываю значение,
units.textContent = options.units; //единицы измерения
value.classList.add('chart__value');
units.classList.add('chart__units');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size; //размер канваса
item.appendChild(value);
item.appendChild(canvas);
value.appendChild(units);
ctx.translate(options.size / 2, options.size / 2); // меням центр холста
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // поворачиваем на -90 deg
var radius = (options.size - options.lineWidth) / 2; //радиус окружности
/**
* Отрисовка круга
*
* @param {String} color
* @param {Number} lineWidth
* @param {Number} value
*/
var drawCircle = function(color, lineWidth, value) {
value = Math.min(Math.max(0, value || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * value, false);
ctx.strokeStyle = color;
ctx.lineCap = 'butt'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
drawCircle('#efefef', options.lineWidth, 100 / 100);
if (parseInt(options.value) === 0) {
drawCircle('#efefef', options.lineWidth, options.value / options.max);
} else {
drawCircle('#555555', options.lineWidth, options.value / options.max);
}
});
});
@alexbaumgertner
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment