用JavaScript轻松绘制饼图和环形图

前端

2024-02-12 17:10:17

用 JavaScript 和 Canvas 制作引人注目的饼图和环形图

什么是饼图和环形图？

饼图和环形图是数据可视化的强大工具，可帮助您轻松理解复杂的数据集。饼图展示了整体中各部分所占的比例，而环形图则揭示了不同部分之间的关系。通过使用 JavaScript 和 Canvas，您可以轻松绘制出这些图表，让您的数据一目了然。

绘制饼图：一步一步来

创建 Canvas 元素： 这是您绘制图表的基础。使用 JavaScript 创建一个 Canvas 元素，并为其设置宽度和高度。
获取上下文： 获取 Canvas 的绘图上下文，以便可以访问绘图功能。
定义中心点和半径： 确定饼图的中心点和半径，这将决定其大小和位置。
计算扇形角度： 根据您要表示的数据计算每个扇形的角度。总角度应为 360 度。
绘制扇形： 使用绘图上下文开始绘制扇形。从中心点移动到扇形的末端，然后连接回中心点以形成一个闭合区域。
填充颜色： 为每个扇形指定不同的颜色以进行区分。您可以使用 HSL 格式创建生动的调色板。

创建环形图：只需一点调整

环形图与饼图非常相似，但有一个区别：中间有一个空心圆。要制作环形图，只需在绘制饼图后添加以下步骤：

绘制内圆： 在饼图中心绘制一个圆，其半径约为饼图半径的一半。
填充内圆： 将内圆填充为白色或其他浅色，以创建空心区域。

代码示例：绘制饼图和环形图

// 饼图
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 200;
const data = [10, 20, 30, 40, 50];
const total = data.reduce((a, b) => a + b, 0);
const angles = data.map(value => value / total * 2 * Math.PI);
angles.forEach((angle, index) => {
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.arc(centerX, centerY, radius, 0, angle, false);
  ctx.lineTo(centerX, centerY);
  ctx.fillStyle = `hsl(${index * 360 / data.length}, 100%, 50%)`;
  ctx.fill();
});

// 环形图
ctx.beginPath();
ctx.arc(centerX, centerY, radius / 2, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();