Chart.js能否实现雷达图（Radar Chart）跨轴多色填充效果

该多色填充雷达图效果完全可以通过Chart.js实现，无需更换其他图表库。
原生Chart.js雷达图的单个dataset确实默认仅支持配置1种填充色，但可以通过官方提供的扩展能力绕过这个限制，实现沿坐标轴分段的多色填充。

你可以根据自己的项目情况二选一：

• 自定义Canvas插件实现（推荐）
  借助Chart.js的插件API，在afterDatasetsDraw渲染钩子中自定义填充逻辑：
  1. 读取当前雷达图的中心点坐标、每个维度轴的角度、当前数据集在各个轴上的实际落点坐标
  2. 将原本的整块多边形填充区域，按轴拆分为「中心点+相邻两个轴落点」组成的多个三角形区块
  3. 遍历每个三角形区块，填充对应预设的颜色，最后补绘分段的轮廓线消除色块缝隙即可
     这种方式不需要改动原有数据集结构，封装为通用插件后可直接复用，对原有交互（tooltip、图例等）没有影响。
• 拆分多数据集叠加实现（零原生Canvas代码）
  如果不想编写自定义绘制逻辑，可以把原有的单个数据集拆分为和坐标轴数量相等的多个数据集：
  1. 每个拆分后的数据集，仅保留相邻两个轴的真实数值，其余所有轴的数值都设为雷达图中心点对应的最小值
  2. 给每个拆分后的数据集单独配置对应的填充色、边框样式
  3. 隐藏多余的图例项，重写tooltip的取值逻辑，避免多数据集带来的交互冗余
     这种方式门槛更低，全程用Chart.js原生配置即可实现，缺点是配置量更大，交互逻辑需要额外适配。

避坑提示：如果选择拆分数据集的方案，记得给每个拆分后的数据集开启fill: true配置，同时不要给填充色设置过高的透明度，避免相邻色块重叠区域出现偏色问题。

内容的提问来源于stack exchange，提问作者Adam Polak Moetsi