如何使用ChartJS v3基于环形图改造实现简单仪表盘

缺失的配置及修改方案 #

你需要补充3类配置即可实现目标效果：

• 调整环形宽度：在dataset中新增cutout属性控制环形的镂空占比，数值越大环形越细
• 新增进度端圆角：在dataset中新增borderRadius属性实现进度条两端的圆角效果
• 关闭默认冗余组件：在options中关闭图例、悬浮提示、点击交互等不需要的默认功能

修改后的完整代码如下：

export const GaugeChart: VFC<GaugeChartProps> = ({
  value,
  max = 100,
})  => {
  const percent = value / max;

  return <ChartJS
    type="doughnut"
    data={{
      datasets: [
        {
          backgroundColor: [
            'rgb(255, 99, 132)',
            '#ccc',
          ],
          data: [
            percent * 100,
            100 - (percent * 100),
          ],
          cutout: '75%', // 控制环形宽度，可根据实际视觉调整
          borderRadius: 20, // 控制进度两端圆角，可根据需求调整
        },
      ],
    }}
    options={{
      rotation: -1.0 * Math.PI, // 弧度制起始角度
      circumference: Math.PI, // 弧度制扫过角度
      plugins: {
        legend: { display: false }, // 关闭图例
        tooltip: { enabled: false }, // 关闭悬浮提示
      },
      interaction: {
        mode: 'nearest',
        intersect: false,
      },
      events: [] // 关闭所有交互事件，避免点击悬浮效果
    }}
  />
};

如果需要调整环形粗细，只需要修改cutout的百分比值即可，数值越高环形越细。

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