Chart.js雷达图数值全满时仅占50%空间的调整方案咨询

该现象是Chart.js雷达图的默认设计导致的：径向轴默认会在数据最大值之上预留额外的刻度缓冲区，再叠加画布默认内边距、刻度标签占位，就会出现全满值数据的填充区域仅占画布约50%空间的情况。

具体优化方案 #

• 固定径向轴的数值范围
  手动指定径向轴的min和max属性，取消自动计算的缓冲区，让满值刚好对应径向轴的最外圈，同时开启beginAtZero保证数值映射逻辑正确。
• 减少径向轴的留白
  调整scale.padding参数，缩小径向轴最外圈和画布边缘的间距，进一步释放可绘制空间。
• 调整全局布局内边距
  配置layout.padding减少画布四周的默认留白，让雷达图可以利用更多画布空间。
• 隐藏非必要元素（可选）
  如果不需要显示刻度值、多余网格线，可以直接隐藏相关元素，进一步提升填充区占比。

完整代码示例 #

<canvas id="marksChart" width="600" height="400"></canvas>

var marksCanvas = document.getElementById("marksChart");

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [100, 100, 100, 100, 100, 100]
  }]
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData,
  options: {
    scales: {
      r: {
        // 固定径向轴数值范围，刚好匹配满值100
        min: 0,
        max: 100,
        beginAtZero: true,
        // 减少径向轴边缘留白
        padding: 0,
        // 可选：隐藏刻度值节省空间
        ticks: {
          display: false
        }
      }
    },
    layout: {
      // 减少画布全局内边距，可根据需求调整数值
      padding: 10
    }
  }
});

调整后全满值数据的填充区域占比可以提升到画布的85%以上，你可以根据自身视觉需求调整padding、max等参数的数值，平衡留白和填充占比。

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