在圆环饼图p5js中显示数据标签

在圆环饼图p5.js中显示数据标签，可以通过以下步骤实现：

首先，确保你已经安装了p5.js库，并在HTML文件中引入了相关的p5.js脚本。
创建一个canvas元素，并设置其大小和位置。

function setup() {
  createCanvas(400, 400);
}

定义一个数据数组，包含每个扇形的数值。

let data = [30, 50, 20];

计算总数，以便后续计算百分比。

let total = data.reduce((a, b) => a + b, 0);

定义颜色数组，用于绘制每个扇形的颜色。

let colors = ['#ff0000', '#00ff00', '#0000ff'];

定义起始角度和结束角度，并使用arc()函数绘制每个扇形。

let startAngle = 0;
for (let i = 0; i < data.length; i++) {
  let endAngle = startAngle + (data[i] / total) * TWO_PI;
  fill(colors[i]);
  arc(width / 2, height / 2, 200, 200, startAngle, endAngle);
  startAngle = endAngle;
}

在每个扇形的中心位置绘制数据标签。

startAngle = 0;
for (let i = 0; i < data.length; i++) {
  let endAngle = startAngle + (data[i] / total) * TWO_PI;
  let labelAngle = startAngle + (endAngle - startAngle) / 2;
  let x = width / 2 + cos(labelAngle) * 100;
  let y = height / 2 + sin(labelAngle) * 100;
  fill(0);
  textAlign(CENTER, CENTER);
  text(data[i], x, y);
  startAngle = endAngle;
}