Chart.js 3.9：如何为雷达图的轴区域填充背景色？

Chart.js 3.9版本没有原生支持雷达图轴背景直接填充的配置项，你可以通过自定义插件来实现这个效果。以下是两种常见的实现方式：

方式1：填充整个雷达区域背景 #

如果需要给整个雷达轴覆盖的区域填充单一颜色，添加如下自定义插件到你的图表配置中：

this.chart = new Chart(spiderChart as ChartItem, {
  type: 'radar',
  data: this.data,
  options: {
    scales: {
      r: {
        ticks: {
          backdropColor: 'rgba(0,0,0,0.01)',
        },
        angleLines: {
          display: true,
          color: 'rgba(255,255,255,0.1)',
        },
        grid: {
          circular: true,
          color: 'rgba(255,255,255,0.1)',
        },
        suggestedMin: 0,
        suggestedMax: 4,
      },
    },
    responsive: true,
    elements: {
      line: {
        borderWidth: 1,
        borderJoinStyle: 'round',
        borderCapStyle: 'round',
      },
      point: {
        pointStyle: 'circle',
        borderColor: 'rgba(255,255,255,0.1)',
      },
    },
  },
  plugins: [{
    beforeDraw: (chart) => {
      const ctx = chart.ctx;
      const scale = chart.scales.r;
      const pointCount = scale.points.length;
      const maxRadius = scale.maxRadius;

      ctx.save();
      ctx.beginPath();
      for (let i = 0; i < pointCount; i++) {
        const point = scale.getPointPosition(i, maxRadius);
        i === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y);
      }
      ctx.closePath();
      // 自定义填充颜色，可按需修改
      ctx.fillStyle = 'rgba(100, 100, 100, 0.08)';
      ctx.fill();
      ctx.restore();
    }
  }]
});

方式2：分层填充刻度背景 #

如果需要给每个刻度环形区域填充渐变或不同深浅的颜色，修改插件逻辑如下：

plugins: [{
  beforeDraw: (chart) => {
    const ctx = chart.ctx;
    const scale = chart.scales.r;
    const pointCount = scale.points.length;
    const ticks = scale.ticks;

    ctx.save();
    ticks.forEach((tick, index) => {
      const radius = scale.getDistanceFromCenterForValue(tick.value);
      ctx.beginPath();
      for (let i = 0; i < pointCount; i++) {
        const point = scale.getPointPosition(i, radius);
        i === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y);
      }
      ctx.closePath();
      // 按刻度层级设置透明度，实现渐变效果
      ctx.fillStyle = `rgba(150, 150, 150, ${0.04 + index * 0.02})`;
      ctx.fill();
    });
    ctx.restore();
  }
}]

说明 #

• 你可以根据需求调整fillStyle的颜色和透明度，匹配你的设计风格。
• 插件的beforeDraw钩子会在图表绘制前执行，确保背景绘制在最底层，不会覆盖图表数据。

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