У меня есть функция, которая выводит диаграммы на странице
function initCanvasDiagrams() {
let canvas = document.querySelectorAll("canvas");
canvas.forEach((el, index) => {
let ctx = el.getContext("2d");
let lastend = 0;
let myTotal = 0;
let data = [30, 15, 30, 25];
let myColor = ['#1DCDF0', '#00BDBD', '#0D94E0', '#0D53A3'];
let labels = ['30%', '15', '30', '25'];
for (let e = 0; e < data.length; e++) {
myTotal += data[e];
}
// make the chart 10 px smaller to fit on canvas
let off = 10
let w = (el.width - off) / 2
let h = (el.height - off) / 2
for (let i = 0; i < data.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(w, h);
let len = (data[i] / myTotal) * 2 * Math.PI
let r = h - off / 2
ctx.arc(w, h, r, lastend, lastend + len, false);
ctx.lineTo(w, h);
ctx.fill();
ctx.fillStyle = 'white';
ctx.font = 'bold 24px sans-serif';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let mid = lastend + len / 2
ctx.fillText(labels[i], w + Math.cos(mid) * (r / 2), h + Math.sin(mid) * (r / 2));
lastend += Math.PI * 2 * (data[i] / myTotal);
}
})
}
Из массива labels подтягиваются значения для конкретной области. Я хочу, чтобы после этого значения выводился символ "%", но с меньшим font-siz'ом. Как бы это реализовать?
Буду рад любой обратной связи!
