canvas之旅系列----(四) 之画个饼图

2024-01-04 02:11:40

前言

在前几篇canvas之旅系列文章中，我们分别绘制了折线图和柱状图，通过这些例子，我们已经对canvas绘制图表的流程和原理有了一定的了解。其实这些图表有一个共同点，都是基于笛卡尔坐标系来绘制的。

在这一篇canvas之旅系列文章中，我们将要绘制一种新的图表——饼图。饼图是一种表示比例数据的图表，它将数据表示为一个圆，圆的面积代表数据的总和，圆中各扇形的面积代表各个数据的比例。

数据准备

为了方便后续绘制饼图，我们先要对数据进行格式化。

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  { name: 'D', value: 40 },
  { name: 'E', value: 50 }
];

在这个例子中，我们有5个数据，每个数据都有一个名称（name）和一个值（value）。

绘制饼图

现在我们已经准备好了数据，就可以开始绘制饼图了。

首先，我们需要创建一个canvas元素。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

然后，我们需要计算饼图的总面积。

let totalValue = 0;
for (const item of data) {
  totalValue += item.value;
}

接下来，我们需要计算每个扇形的角度。

const angles = [];
for (const item of data) {
  angles.push(item.value / totalValue * 2 * Math.PI);
}

然后，我们需要绘制每个扇形。

let startAngle = 0;
for (let i = 0; i < data.length; i++) {
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + angles[i]);
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  ctx.fill();

  startAngle += angles[i];
}