带有反应显示百分比的甜甜圈图表 - JavaScript

在前端开发中，数据可视化是非常重要的，甜甜圈图表是常用的数据可视化方式之一。本文将介绍如何用 JavaScript 制作一个带有反应显示百分比的甜甜圈图表。

步骤一：HTML 结构

首先，我们需要在 HTML 中创建一个 div，用于包裹我们的甜甜圈图表。具体代码如下：

<div class="donut-chart"></div>

步骤二：CSS 样式

然后，我们需要添加一些 CSS 样式让 div 元素显示为一个圆形，比如设置宽度和高度等。具体代码如下：

.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

步骤三：JavaScript 代码

接着，我们需要编写 JavaScript 代码来实现甜甜圈图表的功能。我们将用 Canvas 来绘制甜甜圈。具体代码如下：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = canvas.width = 200;
const height = canvas.height = 200;

const $chart = document.querySelector('.donut-chart');
$chart.appendChild(canvas);

const data = [
  { value: 50, color: 'red' },
  { value: 30, color: 'blue' },
  { value: 20, color: 'green' },
];

const total = data.reduce((sum, item) => sum + item.value, 0);
let startAngle = 0;

data.forEach(item => {
  const angle = Math.PI * 2 * (item.value / total);
  const endAngle = startAngle + angle;

  context.beginPath();
  context.arc(width / 2, height / 2, width / 2 * 0.8, startAngle, endAngle);
  context.lineWidth = width / 2 - 1;
  context.strokeStyle = item.color;
  context.stroke();

  startAngle = endAngle;
});

context.beginPath();
context.arc(width / 2, height / 2, width / 2 * 0.6, 0, Math.PI * 2);
context.fillStyle = '#fff';
context.fill();

context.font = 'bold 20px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = 'black';
context.fillText(`${Math.round((data[0].value / total) * 100)}%`, width / 2, height / 2);

以上代码中，我们创建了一个 Canvas 元素并获取了绘制 2D 图形的上下文对象。然后，我们定义了一个 data 数组，该数组包含了每个部分的值和颜色。

接下来，我们用 forEach 循环遍历 data 数组，并使用 arc 方法来绘制甜甜圈的每个部分。在绘制完每个部分后，我们更新 startAngle 变量的值，以便于下一个部分开始绘制。

最后，我们在甜甜圈的中心添加了一个白色的圆形，并且计算了第一个部分所占的百分比并显示在圆心。这部分代码中用到了文字绘制相关的 API。

完整代码

<div class="donut-chart"></div>

<style>
.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>

<script>
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = canvas.width = 200;
const height = canvas.height = 200;

const $chart = document.querySelector('.donut-chart');
$chart.appendChild(canvas);

const data = [
  { value: 50, color: 'red' },
  { value: 30, color: 'blue' },
  { value: 20, color: 'green' },
];

const total = data.reduce((sum, item) => sum + item.value, 0);
let startAngle = 0;

data.forEach(item => {
  const angle = Math.PI * 2 * (item.value / total);
  const endAngle = startAngle + angle;

  context.beginPath();
  context.arc(width / 2, height / 2, width / 2 * 0.8, startAngle, endAngle);
  context.lineWidth = width / 2 - 1;
  context.strokeStyle = item.color;
  context.stroke();

  startAngle = endAngle;
});

context.beginPath();
context.arc(width / 2, height / 2, width / 2 * 0.6, 0, Math.PI * 2);
context.fillStyle = '#fff';
context.fill();

context.font = 'bold 20px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = 'black';
context.fillText(`${Math.round((data[0].value / total) * 100)}%`, width / 2, height / 2);
</script>

总结

本文介绍了如何用 JavaScript 制作一个带有反应显示百分比的甜甜圈图表。我们利用 Canvas 绘制图形，并使用一些文字绘制 API 在图表中心显示了百分比。如果您对这个主题感兴趣，欢迎尝试自己编写代码并尝试调整样式和数据以满足您自己的需求。