如何使用Chart.js实现仪表盘样式的半环形甜甜圈图表？

你可以通过调整甜甜圈图表的旋转角度、显示范围及数据配置，实现类似仪表盘的半环形效果，最终预期效果如下：

完整实现代码 #

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="donut-container">
    <div class="chart-container">
        <canvas id="donut-chart"></canvas>
    </div>
</div>

CSS代码 #

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.donut-container {
  text-align: center;
  margin-top: 20px;
}

.chart-container {
  width: 100%; /* 让容器自适应宽度 */
  max-width: 500px; /* 可选：设置容器最大宽度 */
  margin: 0 auto; /* 居中容器 */
}

JavaScript代码 #

// 半环形图表数据（先定义未填充区域，再定义已填充区域）
const data = {
    labels: ['未填充区域', '已填充区域'], // 调整标签顺序以匹配显示逻辑
    datasets: [{
        data: [30, 70], // 30为未填充占比，70为已填充占比
        backgroundColor: ['#A1A5B7', '#F1BC00'], // 对应区域的颜色
    }]
};

// 图表核心配置
const config = {
    type: 'doughnut', // 基于甜甜圈图表类型改造
    data: data,
    options: {
        rotation: 0.5 * Math.PI, // 将图表旋转90度，从右侧开始绘制
        circumference: Math.PI, // 限制图表仅显示180度，形成半环
        cutout: '70%', // 设置内圈镂空比例，模拟仪表盘的厚度
        plugins: {
            legend: {
                display: false, // 隐藏图例
            },
        },
    },
};

// 初始化图表
const canvas = document.getElementById('donut-chart');
const ctx = canvas.getContext('2d');
new Chart(ctx, config);

核心调整说明：通过circumference: Math.PI将图表限制为180度半环，配合rotation: 0.5 * Math.PI让半环水平朝上，再通过数据顺序和颜色区分填充区域与背景区域，最终实现仪表盘样式。

内容的提问来源于stack exchange，提问作者Rejuan hossain