Chart.js环形图处理数值差异过大时出现异常问题

问题原因 #

当数据值差异极大时，小数值对应的圆弧角度会变得极小，再加上你设置的spacing: -50（让圆弧重叠）和borderRadius: 15，会触发Chart.js的渲染bug：极小角度的圆弧无法正确处理大圆角，负间距也会让小圆弧被大圆弧挤压或覆盖，导致图表显示异常。

解决方案 #

1. 设置最小圆弧角度 #

通过elements.arc.minAngle给每个圆弧设置最小角度，确保小数值的圆弧也有足够的空间渲染，避免因角度过小导致的绘制错误。

2. 优化圆弧间距与圆角 #

• 负间距（spacing: -50）会让圆弧过度重叠，可适当调小这个值（比如改为-20），平衡重叠效果和渲染稳定性；
• 若需要保留大圆角，可通过插件动态根据圆弧角度调整borderRadius，小角度圆弧使用更小的圆角。

修改后的代码示例 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

let color1 = '#98A3CC';
let color2 = '#6475B2';
let hoverColor="#283F94";

var options = {
  type: 'doughnut',
  data: {
    labels: ["One", "Two", "Three", "Four"],
    datasets: [{
      label: '# of Votes',
      data: [3956745.7,5400,4086.06,50000],
      backgroundColor: [color1, color2, color1, color2],
      hoverBackgroundColor: new Array(4).fill(hoverColor),
    }]
  },
  options: {
    cutout: '90%',
    radius: '90%',
    plugins: {
      legend: {
        display: false
      }
    },
    elements: {
      arc: {
        spacing: -20, // 调小负间距，减少过度重叠
        borderRadius: 15,
        minAngle: 5 // 设置最小角度，确保小数值圆弧有足够渲染空间
      }
    }
  }
}

var chartInstance = new Chart(document.getElementById("myChart"), options);

进阶优化：动态调整圆角 #

如果需要更精细的控制，可以使用Chart.js插件，根据圆弧的角度动态设置borderRadius，避免小角度圆弧出现渲染问题：

// 添加到options.plugins数组中
{
  beforeDraw: (chart) => {
    chart.getDatasetMeta(0).data.forEach((arc) => {
      // 角度小于10度时，将圆角设为2，否则保持15
      arc.options.borderRadius = arc.parsedAngle < (10 * Math.PI / 180) ? 2 : 15;
    });
  }
}

内容的提问来源于stack exchange，提问作者M.KH