如何在React中使用chart.js和react-chartjs-2为雷达图各角落添加盒子？

当前状态与需求 #

我已经实现了常规样式的雷达图，现在希望给雷达图的每个轴末端添加盒子装饰，达到每个角落带盒子的效果。

现有实现代码 #

import {
  Chart as ChartJS,
  Filler,
  Legend,
  LineElement,
  PointElement,
  RadialLinearScale,
  Tooltip,
  Plugin
} from "chart.js";
import React from "react";
import { Radar } from "react-chartjs-2";
import "./SpiderChart.scss";

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

type Dataset = {
  data: number[];
  backgroundColor: string;
  borderColor: string;
  borderWidth: number;
  pointBorderColor: string;
  pointBackgroundColor?: string;
  pointBorderWidth: number;
  pointRadius: number;
};

interface SpiderChartProps {
  data: {
    labels: string[];
    datasets: Dataset[];
  }
}

实现方案 #

要实现雷达角落的盒子效果，需要借助Chart.js的自定义插件，在图表绘制完成后手动绘制盒子。以下是完整修改后的代码：

// 自定义插件：绘制雷达角落的盒子
const radarCornerBoxPlugin: Plugin = {
  id: 'radarCornerBox',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const scale = chart.scales.r;
    if (!scale) return;

    // 盒子尺寸和样式可按需调整
    const boxSize = 12;
    ctx.fillStyle = '#fff'; // 盒子填充色
    ctx.strokeStyle = '#607080'; // 盒子边框色
    ctx.lineWidth = 1;

    // 遍历每个雷达轴末端点，绘制盒子
    scale.points.forEach((point) => {
      // 让盒子中心对齐轴末端点，计算左上角坐标
      const x = point.x - boxSize / 2;
      const y = point.y - boxSize / 2;
      
      ctx.beginPath();
      ctx.rect(x, y, boxSize, boxSize);
      ctx.fill();
      ctx.stroke();
    });
  }
};

// 注册自定义插件
ChartJS.register(radarCornerBoxPlugin);

const SpiderChart: React.FC<SpiderChartProps> = ({ data }) => {
  const options = {
    plugins: {
      legend: {
        display: false,
      },
      radarCornerBox: {} // 启用自定义插件
    },
    scales: {
      r: {
        grid: {
          color: "#607080",
        },
        angleLines: {
          color: "#607080", 
        },
        ticks: {
          color: "white",
          backdropColor: "transparent",
        },
        pointLabels: {
          color: "rgba(255, 255, 255, 0.6)",
        },
        // 调整轴最大范围，避免盒子被容器截断
        max: Math.max(...data.datasets[0].data) + 5,
      },
    },
  };

  return (
    <div className="spider-chart" style={{ width: "500px" }}>
      <Radar options={options} data={data} />
    </div>
  );
};

export default SpiderChart;

关键说明 #

1. 插件逻辑：利用afterDraw钩子，在图表绘制完成后，通过Canvas API在每个雷达轴的末端点绘制矩形盒子。
2. 样式自定义：可修改boxSize、fillStyle、strokeStyle等参数，匹配目标效果的样式。
3. 轴范围调整：修改scales.r.max的值，确保雷达轴末端有足够空间显示盒子，避免被截断。

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