React+Chart.js 3π/2周长环形图如何实现任意周长圆角适配

核心问题说明 #

你参考的原有圆角实现是针对ChartJS默认整圆/半圆圆环的硬编码逻辑，写死了角度偏移量，当你自定义circumference（周长）和rotation（起始旋转角）参数后，角度转换逻辑不匹配，才导致圆角位置偏移，手动调整平移系数的方式只适配特定场景，无法通用。

通用修改方案 #

无需手动调整平移系数，直接动态读取图表配置的旋转角和周长参数，修正角度转换逻辑即可适配半周到整周之间的任意周长环形图，修改后的完整roundedEnd插件代码如下：

let roundedEnd = {
  afterUpdate: function (chart) {
    var a = chart.config.data.datasets.length - 1;
    for (let i in chart.config.data.datasets) {
      for (
        var j = chart.config.data.datasets[i].data.length - 1;
        j >= 0;
        --j
      ) {
        if (Number(j) == chart.config.data.datasets[i].data.length - 1)
          continue;
        var arc = chart.getDatasetMeta(i).data[j];
        arc.round = {
          x: (chart.chartArea.left + chart.chartArea.right) / 2,
          y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
          radius:
            chart.innerRadius +
            chart.radiusLength / 2 +
            a * chart.radiusLength,
          // 修正厚度计算，适配不同cutout比例
          thickness: chart.outerRadius - chart.innerRadius,
          backgroundColor: arc._model.backgroundColor,
        };
      }
      a--;
    }
  },
  afterDraw: function (chart) {
    var ctx = chart.ctx;
    // 动态读取图表配置的旋转角，ChartJS默认值为 -Math.PI/2
    const rotation = chart.config.options.rotation ?? -Math.PI / 2;
    for (let i in chart.config.data.datasets) {
      for (
        var j = chart.config.data.datasets[i].data.length - 1;
        j >= 0;
        --j
      ) {
        if (Number(j) == chart.config.data.datasets[i].data.length - 1)
          continue;
        var arc = chart.getDatasetMeta(i).data[j];
        // 修正角度转换逻辑，适配自定义旋转角
        var endAngle = rotation + arc._view.endAngle;

        ctx.save();
        // 无需修改平移系数，保持原圆心坐标即可
        ctx.translate(arc.round.x, arc.round.y);
        ctx.fillStyle = arc.round.backgroundColor;
        ctx.beginPath();
        ctx.arc(
          arc.round.radius * Math.cos(endAngle),
          arc.round.radius * Math.sin(endAngle),
          arc.round.thickness / 2,
          0,
          2 * Math.PI
        );
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }
    }
  },
};

适配验证 #

你当前配置的rotation: 3*Math.PI/4、circumference: 3*Math.PI/2场景下，上述代码可直接正常渲染圆角，不需要额外调整参数，半周到整周的任意周长环形图都可直接适配。

补充：如果你需要给弧的起始端也加圆角，把上述代码中endAngle替换为startAngle，再重复一遍arc绘制逻辑即可。

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