Angular中ChartJS雷达图全为0时显示异常问题排查

问题现象 #

在Angular项目中使用ChartJS绘制雷达图时，若所有数据集的值都设置为0，图表的点不会显示在中心位置，反而延伸到第二个刻度处；但只要数据集中存在非0值，图表显示就完全正常。

原代码示例 #

data: {
  labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
  datasets: [
    {
      label: '',
      data:[0, 0, 0, 0, 0, 0, 0, 0],
      backgroundColor: 'rgba(0,105,0, 0.2)',
      borderColor: 'green',
      pointBackgroundColor: '#green',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'green',
    },
  ],
},
options: {
  scales: {
    r: {
      ticks: {
        display: false,
      },
      pointLabels: {
        padding: 13,
      },
      suggestedMin: 0,
      suggestedMax: 0,
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
      align: 'end',
      display: true,
      offset: 1,
    },
  },
}

问题原因 #

你将suggestedMin和suggestedMax都设为0，导致ChartJS在计算刻度范围时出现逻辑异常——当最小值和最大值完全相等时，ChartJS会自动扩展刻度范围以避免计算错误，最终造成点的位置偏移。

解决方案 #

方案1：移除固定刻度范围设置 #

直接删除suggestedMin和suggestedMax，让ChartJS自动根据数据计算合理的刻度范围，全0数据时会正常显示在中心。修改后的刻度配置如下：

scales: {
  r: {
    ticks: {
      display: false,
    },
    pointLabels: {
      padding: 13,
    },
    // 移除suggestedMin和suggestedMax配置
  },
},

方案2：设置合理的最大刻度值 #

如果需要固定刻度范围，将suggestedMax设为一个大于0的数值（比如10），同时保留suggestedMin:0，这样全0数据会正确映射到中心位置：

scales: {
  r: {
    ticks: {
      display: false,
    },
    pointLabels: {
      padding: 13,
    },
    suggestedMin: 0,
    suggestedMax: 10, // 设置大于0的最大值
  },
},

额外修复 #

原代码中pointBackgroundColor: '#green'是错误写法，green是CSS颜色关键字，不需要加#，应改为pointBackgroundColor: 'green'，否则可能导致点的颜色无法正常显示。

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