Chart.js V3版本实现Gauge Chart（仪表盘图表）相关问题咨询

Chart.js 3.X版本完全可以通过改造环形图（Doughnut Chart）实现仪表盘，相比2.X版本，3.X重构了配置结构，实现逻辑更清晰，无需额外插件即可完成基础仪表盘开发。

核心实现思路 #

• 将环形图的绘制范围限定为180度，仅保留上半部分半圆作为仪表盘的显示区域，下半部分用透明数据占位
• 用数据集的不同分段区分刻度区间、当前值进度段
• 通过自定义插件实现指针、中心数值、刻度线的自定义绘制

基础实现代码示例 #

<!-- 页面先引入Chart.js 3.X资源，再添加画布元素 -->
<canvas id="gaugeChart" width="400" height="200"></canvas>

// 仪表盘基础配置，示例为0-100刻度，当前值65
const gaugeData = {
  datasets: [{
    // 前两项对应上半部分180度的数值：当前值/剩余值，第三项为下半部分透明占位
    data: [65, 35, 100],
    backgroundColor: [
      '#2196F3', // 当前进度颜色
      '#E0E0E0', // 剩余区域颜色
      'transparent' // 底部占位透明不可见
    ],
    borderWidth: 0,
    cutout: '75%' // 调整该参数可以修改仪表盘环形的粗细
  }]
};

const gaugeConfig = {
  type: 'doughnut',
  data: gaugeData,
  options: {
    rotation: -90, // 环形起始角度设为-90度，刚好从左侧水平位置开始
    circumference: 180, // 环形总绘制角度为180度，仅显示上半圆
    plugins: {
      legend: { display: false }, // 隐藏默认图例
      tooltip: { enabled: false } // 不需要悬浮提示可直接关闭
    }
  },
  // 自定义插件绘制指针与中心数值
  plugins: [{
    id: 'gaugeCustom',
    afterDraw: (chart) => {
      const { ctx, chartArea } = chart;
      const centerX = (chartArea.left + chartArea.right) / 2;
      const centerY = chartArea.bottom; // 仪表盘圆心固定在底部中点
      const radius = (chartArea.right - chartArea.left) / 2;
      const currentValue = chart.data.datasets[0].data[0];
      
      // 绘制中心数值文本
      ctx.save();
      ctx.font = 'bold 24px sans-serif';
      ctx.fillStyle = '#333';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(`${currentValue}%`, centerX, centerY - radius * 0.3);
      
      // 计算指针角度并绘制
      const pointerAngle = -90 + (currentValue / 100) * 180;
      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate(pointerAngle * Math.PI / 180);
      // 指针线条
      ctx.beginPath();
      ctx.moveTo(-10, 0);
      ctx.lineTo(radius * 0.7, 0);
      ctx.lineWidth = 4;
      ctx.strokeStyle = '#f44336';
      ctx.lineCap = 'round';
      ctx.stroke();
      // 指针中心圆点
      ctx.beginPath();
      ctx.arc(0, 0, 8, 0, 2 * Math.PI);
      ctx.fillStyle = '#f44336';
      ctx.fill();
      ctx.restore();
    }
  }]
};

// 实例化仪表盘
const myGauge = new Chart(document.getElementById('gaugeChart'), gaugeConfig);

开发优化技巧 #

• 如果需要多色刻度区间，可以将第一个数据集拆分为多个分段，比如[20,20,20,40,100]，分别对应不同区间的背景色，即可实现红黄绿分段的刻度效果
• 指针的长度、样式可以通过修改radius * 0.7的系数、lineWidth参数调整
• 需要显示刻度线的话，可以在自定义插件的afterDraw钩子中循环计算不同角度绘制短线，无需引入额外依赖
• 3.X版本的动画配置与2.X有差异，需要定制指针动画的话，可以在options.animation中配置onProgress钩子同步更新指针角度即可

内容的提问来源于stack exchange，提问作者Andre Mendes