Chart.js v4.2.1雷达图stepSize配置失败报错求助

我使用Chart.js v4.2.1实现雷达图，基础代码如下：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },                
          },            
        };

        var ctx = document.getElementById('myChart');

    var ChartData = {
      labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
      ],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 10, 21, 56, 55, 40],
        fill: true,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(255, 99, 132)'
      }, {
        label: 'My Second Dataset',
        data: [28, 48, 40, 19, 36, 27, 10],
        fill: true,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(54, 162, 235)'
      }]
    };

  var myRadar = new Chart(ctx, {
    type: 'radar',
    data: ChartData,
    options: options
  });
</script>

为设置刻度的stepSize，我修改了options配置：

var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },

              ticks: {
                stepSize: 20, // the number of step
                }, 
           
          },             
        };

但配置后出现报错：

Cannot determine type of '' axis. Please provide 'axis' or position option.

解决方案 #

错误原因是ticks配置被放在了scales的根层级，Chart.js无法识别这个游离的配置项，所以抛出了类型判断错误。雷达图的径向刻度配置必须嵌套在scales.r对象内部，和grid、angleLines等配置同级。

正确的options配置如下：

var options = {
  elements: {
    line: {
      borderWidth: 3
    }
  },
  scales: {
    r: {
      grid: {
        lineWidth: 4
      },
      angleLines: {
        lineWidth: 6
      },
      suggestedMin: 0,
      suggestedMax: 100,
      // 将ticks移到r刻度配置内部
      ticks: {
        stepSize: 20
      }
    }                
  }            
};

这样配置后，雷达图的径向刻度会按照stepSize:20来划分，从0到100会生成0、20、40、60、80、100这些刻度值。

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