52 lines
2.0 KiB
JavaScript
52 lines
2.0 KiB
JavaScript
(function() {
|
|
var pieCharts = document.querySelectorAll('.pie-chart');
|
|
|
|
Array.prototype.forEach.call(pieCharts, function(wrapperEl) {
|
|
// Pull our variables out of our helper div
|
|
var dataset = wrapperEl.dataset;
|
|
var percentage = dataset.percentage ? parseInt(dataset.percentage, 10) : 0;
|
|
var diameter = dataset.diameter ? parseInt(dataset.diameter, 10) : 150;
|
|
var strokeWidth = dataset.strokeWidth ? parseInt(dataset.strokeWidth, 10) : 15;
|
|
var fillColor = dataset.fillColor || '#f47b28'; // orange
|
|
var bgColor = dataset.bgColor || '#fac5a1'; // light orange
|
|
|
|
// Size our wrapper element and add our percentage
|
|
wrapperEl.style.height = diameter + 'px';
|
|
wrapperEl.style.width = diameter + 'px';
|
|
var percentageEl = document.createElement('span');
|
|
percentageEl.classList.add('pie-chart__percentage');
|
|
percentageEl.style.color = fillColor;
|
|
percentageEl.innerText = percentage + '%';
|
|
wrapperEl.appendChild(percentageEl);
|
|
|
|
// Setting up the values we're gonna use to draw our circles
|
|
var center = diameter;
|
|
var radius = center - (strokeWidth);
|
|
var startAngle = degreesToRadians(-90);
|
|
var fullCircle = degreesToRadians(365);
|
|
var endAngle = startAngle + degreesToRadians(percentage / 100 * 365);
|
|
|
|
// Draw our canvas! Note we're doubling our sizes so we look good on high res displays
|
|
var canvas = document.createElement('canvas');
|
|
canvas.classList.add('pie-chart__canvas');
|
|
canvas.height = diameter * 2;
|
|
canvas.width = diameter * 2;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.lineWidth = strokeWidth * 2;
|
|
ctx.strokeStyle = bgColor;
|
|
ctx.beginPath();
|
|
ctx.arc(center, center, radius, startAngle, fullCircle);
|
|
ctx.stroke();
|
|
ctx.strokeStyle = fillColor;
|
|
ctx.beginPath();
|
|
ctx.arc(center, center, radius, startAngle, endAngle);
|
|
ctx.stroke();
|
|
|
|
wrapperEl.appendChild(canvas);
|
|
});
|
|
|
|
function degreesToRadians(degrees) {
|
|
return (degrees / 360) * (2 * Math.PI);
|
|
}
|
|
})();
|