Как создать диаграмму на Vue без использования библиотек? Есть пример кода?

Рейтинг: 0Ответов: 1Опубликовано: 02.02.2023

Как создать диаграмму на Vue без использования дополнительных библиотек? Есть пример кода?

Ответы

▲ 0

Можно рисовать диаграммы в 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" />