如何在Chart.js雷达图中省略0值点，避免边框塌陷且保留对应轴？

是否可以在Chart.js雷达图中省略0值点，以防止边框向中心塌陷，同时仍显示0值点对应的轴？（左侧为当前图表，右侧为期望效果）

最小可复现示例 #

JavaScript代码

const labels = [
  'O', 'D', 'M', 'L', 'S', 'A', 'P', 'C', 'I', 'F'
];

var data = {
  labels: labels,
  datasets: [{
    label: '01',
    data: [0, 2, 1, 3, 1, 0, 0, 1, 3, 2],
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    scales: {
      r: {
        min: 0,
        max: 3,
        ticks: {
          stepSize: 1,
          display: false,
        }
      },
    },
  },
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

HTML代码

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<canvas id="myChart"></canvas>

解决方案 #

要实现需求，只需两步：

• 将数据中的0替换为null，Chart.js会自动跳过这些值对应的点
• 确保数据集配置中spanGaps为false（默认值，显式设置更清晰），避免用线条连接跳过的点

修改后的代码如下：

修改后的JavaScript代码

const labels = [
  'O', 'D', 'M', 'L', 'S', 'A', 'P', 'C', 'I', 'F'
];

var data = {
  labels: labels,
  datasets: [{
    label: '01',
    // 将0替换为null
    data: [null, 2, 1, 3, 1, null, null, 1, 3, 2],
    // 显式设置spanGaps为false，确保不连接跳过的点
    spanGaps: false
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    scales: {
      r: {
        min: 0,
        max: 3,
        ticks: {
          stepSize: 1,
          display: false,
        }
      },
    },
  },
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

修改后，雷达图的边框会跳过值为null的点，不会向中心塌陷，同时所有轴标签（包括对应原0值的O、A、P）依然正常显示在雷达图外围，完全符合期望效果。

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