Chart.js - 如何将图像显示为数据点并固定轴？

Question

目前，轴自动将自己设置为玩家信息中的最小值和最大值。我不明白为什么它不能根据下面的代码修复它的轴？

我也希望 player_image（这是 .jpg 文件的位置）出现在散点的位置（或顶部），但插件似乎不起作用，我不断得到：

chart.js:19 Invalid scale configuration for scale: x (anonymous) @ chart.js:19 chart.js:19 Invalid scale configuration for scale: yAxes 

// Extract the necessary data from the players array
  var data = players.map(function(player) {
    return {
      x: player.age,
      y: player.avg_ranking,
        player_id: player.player_id,
        player_name: player.player_name,
        player_image: player.image
    };
  });

  // Create a new Chart.js chart
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Average Ranking by Age',
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
        pointRadius: 20,
        pointHoverRadius: 20,
      }]
    },
      options: {
      maintainAspectRatio: false,
      scales: {
        x: [{
          type: 'linear',
            min: 18,
            max: 44,
          ticks: {
            stepSize: 1,
          },
          title: {
            display: true,
            labelString: 'Age'
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true,
            min: 0,
            max: 7,
            stepSize: 1,
          },
          scaleLabel: {
            display: true,
            labelString: 'Average Rank'
          }
           }]
         },
        plugins: {
          // Accessing labels and making them images
          labels: {
            render: 'image',
            images: [{
                src: player_image,
                height: 25,
                width: 25
              }],
    }
}
}
});
}

我试了几个插件