ChartJS雷达图相同数值数据被合并为单点的问题解决问询

我用ChartJS制作了雷达图，遇到一个问题：当数据值相同时，对应的点会被合并成一个。比如数据[10,8,0,2.5,10,0,6.25,6.66666667,7.12418301,10]中的两个0值，在图表上只显示一个点。我想让即使数值相同的点也能独立显示，试过设置spanGaps但它只对null值生效，我不想把值转为null，仍希望在图表上保留这些点的显示。

相关代码如下：

const ctx = document.getElementById('ChartJSTargetID');

var marksOptions = {
  plugins: {
    legend: {
      display: false
    },
    animation: {
      duration: 0 // general animation time
    }
  },
  scales: { 
    r: {
      ticks: {
        display: false
      },
      grid: {
        circular: true,
        color: "#9999A9"
      },
      pointLabels:{
        padding: 35,
        callback: function(label) {
          if (/\s/.test(label)) {
            return label.split(" ");
          }else{
            return label;
          }              
        },
        color: 'black',
        font: {
          size: 11,
          weight: 600
        }
      },
    }

  }
}
setTimeout(() => {
  const imgWrap = document.getElementById('ChartJSTargetImageID')
  var img = new Image();
  img.src = ctx.toDataURL()
  imgWrap.appendChild(img)
  ctx.style.display = 'none'
}, 1000);

var marksData = {
  labels: ["Conformidade NBR 5410 (BT)","Conformidade NBR 14039 (MT)","Meio Ambiente","Confiabilidade","Operação do sistema","Metodologia de Manutenção do Sistema","Condição dos Equipamentos","Conformidade NR-10","Obsolescência","Informativo"],
  datasets: [{
    data: [10,8,0,2.5,10,0,6.25,6.66666667,7.12418301,10],
    fill:false,
    spanGaps: true,
    borderColor: "#4D217A"
  }]
};

var radarChart = new Chart(ctx, {
  type: 'radar',
  plugins: [{
    afterLayout: chart => {
      chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
    }
  }],
  data: marksData,
  options: marksOptions
});

出现这个问题的核心原因是：雷达图中数值相同的点会处于同一坐标位置（比如数值为0的点都在中心），导致视觉上重叠成一个点。要让每个点独立显示，可采用以下两种方案：

方案一：给相同数值的点添加微小偏移（简单高效） #

如果允许对数据做极小的、不影响业务逻辑的调整，可以给重复数值的点加上细微差值。比如把其中一个0改为0.001，这样两个点会有极细微的半径差异，既能保证数据准确性，又能显示独立的点：

data: [10,8,0,2.5,10,0.001,6.25,6.66666667,7.12418301,10]

方案二：使用自定义插件强制分离点（不修改原始数据） #

如果不想改动原始数据，可以通过ChartJS的自定义插件，在渲染阶段给每个相同数值的点添加微小的角度偏移，让它们分开显示。修改后的代码如下：

var radarChart = new Chart(ctx, {
  type: 'radar',
  plugins: [
    {
      afterLayout: chart => {
        chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
      }
    },
    // 新增插件：分离相同数值的点
    {
      beforeDraw: (chart) => {
        const meta = chart.getDatasetMeta(0);
        const scale = chart.scales.r;
        // 收集相同数值的点的索引
        const valueMap = {};
        meta.data.forEach((point, index) => {
          const value = chart.data.datasets[0].data[index];
          if (!valueMap[value]) {
            valueMap[value] = [];
          }
          valueMap[value].push({point, index});
        });
        // 对每个数值对应的多个点，添加角度偏移
        Object.values(valueMap).forEach(points => {
          if (points.length > 1) {
            const offsetAngle = 0.02; // 偏移角度（弧度，可调整）
            points.forEach((item, idx) => {
              const angle = scale.getAngleForPoint(item.index);
              // 给每个点添加递增的角度偏移
              const newAngle = angle + (idx - points.length/2) * offsetAngle;
              const radius = scale.getRadiusForValue(chart.data.datasets[0].data[item.index]);
              // 更新点的坐标
              item.point.x = chart.chartArea.left + scale.xCenter + Math.cos(newAngle) * radius;
              item.point.y = chart.chartArea.top + scale.yCenter + Math.sin(newAngle) * radius;
            });
          }
        });
      }
    }
  ],
  data: marksData,
  options: marksOptions
});

这个插件会自动检测相同数值的点，给它们添加微小的角度偏移，让原本重叠的点分散开，同时保留原始数据的准确性。你可以调整offsetAngle的值来控制点之间的间距。

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