Chart.js环形图：设置数据周长小于180度时图表偏移且放大

你当前的问题核心是对Chart.js环形图的渲染逻辑理解有误：

• 手动设置circumference会强制限制整个数据集的显示周长，而非单个数据点的占比
• 只提供单个数据点时，Chart.js会默认将其视为100%占比，再加上强制设置的小周长，就会出现偏移和放大的异常

要实现「完整周长对应total_A，仅显示completed_A部分」的需求，正确的做法是：

• 给数据集提供两个数据点：completed_A 和 total_A - completed_A
• 将第二个数据点的颜色设为透明（或与背景色一致），只展示完成的部分
• 移除circumference的手动设置，让Chart.js按数据比例自动渲染完整360度环形

修正后的代码如下：

import { Chart } from "chart.js/auto";

const DoughnutChart = {
  mounted() {
    const ctx = this.el;
    // 定义目标值和完成值
    const total_A = 360;
    const completed_A = 20;

    const data = {
      labels: ["completed_A", "remaining"],
      datasets: [
        {
          backgroundColor: ["#ffcd8c", "transparent"], // 剩余部分设为透明
          data: [completed_A, total_A - completed_A], // 两个数据点总和为total_A
        },
      ],
    };

    const options = {
      maintainAspectRatio: false,
      cutout: "90%",
      plugins: {
        legend: {
          display: false,
        },
      },
    };

    new Chart(ctx, {
      type: "doughnut",
      data: data,
      options: options,
      plugins: [filterToolTips], // 确保filterToolTips插件已正确定义
    });
  },
};

export default DoughnutChart;

关键修改说明： #

1. 数据结构调整：通过添加total_A - completed_A作为第二个数据点，让Chart.js计算出正确比例，确保环形总周长为360度
2. 颜色设置：将剩余部分设为透明，仅展示完成进度
3. 移除错误配置：删除circumference属性，该属性用于限制整个环形的显示范围（比如半环），而非控制单个数据点的占比

这样无论completed_A是20还是180，环形都会以完整360度为基准，正确渲染完成部分的占比，不会出现偏移或放大问题。

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