Как создать диаграмму на Vue без использования библиотек? Есть пример кода?
Как создать диаграмму на Vue без использования дополнительных библиотек? Есть пример кода?
Источник: Stack Overflow на русском
Как создать диаграмму на Vue без использования дополнительных библиотек? Есть пример кода?
Можно рисовать диаграммы в canvas:
const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
const data_values = [75, 140, 125];
const data_colors = ["red", "green", "blue"];
const total_value = data_values.reduce((accumulator, value) => accumulator + value, 0);
let angle = - Math.PI / 2; // угол
for (let i = 0; i < data_values.length; i++) {
ctx.fillStyle = data_colors[i];
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.arc(
canvas.width / 2, // x
canvas.height / 2, // y
canvas.height / 2, // радиус
angle, // угол начала дуги
angle + Math.PI * 2 * (data_values[i] / total_value), // угол конца дуги
false // false - по часовой стрелке, thue - против часовой стрелки
);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.fill();
angle += Math.PI * 2 * ( data_values[i] / total_value);
}
<canvas id="chart" width="150" height="150" />