如何实现带百分比值的单切片环形进度图（基于Doughnut Pie Chart）

没问题！完全可以把这个Doughnut图表改成你想要的单切片环形进度图，还能直观显示百分比。我帮你调整了代码，直接就能用：

完整代码示例 #

HTML部分 #

<canvas id="chartProgress" width="300" height="200"></canvas>

JavaScript部分 #

const chartProgress = document.getElementById("chartProgress");
if (chartProgress) {
  // 这里设置你的目标进度百分比，比如75%
  const progressPercentage = 75;
  
  const myChartCircle = new Chart(chartProgress, {
    type: 'doughnut',
    data: {
      labels: ["进度"],
      datasets: [{
        // 第一个值是进度占比，第二个是剩余部分（100-进度）
        data: [progressPercentage, 100 - progressPercentage],
        backgroundColor: [
          '#4CAF50', // 彩色进度切片的颜色，可自定义
          '#e0e0e0'  // 背景环形的颜色，也可以用rgba(0,0,0,0)设置完全透明
        ],
        borderWidth: 0 // 去掉边框，让样式更简洁
      }]
    },
    options: {
      cutout: '70%', // 控制环形厚度，值越大环形越细（范围0-100%）
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false // 隐藏图例，因为只需要单个数据项
        },
        tooltip: {
          enabled: false // 关闭默认提示框，也可以自定义提示内容
        },
        // 在环形中心显示百分比文本
        title: {
          display: true,
          text: `${progressPercentage}%`,
          position: 'center',
          font: {
            size: 24,
            weight: 'bold'
          },
          color: '#333'
        }
      }
    }
  });
}

关键修改说明 #

• 数据集里用[进度值, 100-进度值]来实现单切片效果，第二个数据对应背景环形部分
• 通过cutout参数调整环形的厚度，根据需求设置合适的百分比
• 隐藏了图例和默认提示框，让界面更简洁
• 用内置的title插件在中心显示百分比，也可以自定义插件实现更复杂的文本样式

如果需要动态更新进度，只需要修改progressPercentage的值，然后调用myChartCircle.update()即可。

内容的提问来源于stack exchange，提问作者Aymen bz