Chart.js - 如何为散点图上的每个点显示不同的图像？

Question

我得到了一个由 8 个玩家组成的数组，每个玩家都有一个 player.image，这是每个玩家图像的文件目标。我可以为每个点显示一个直接图像，但是当我尝试为每个点添加每个 player_image 时，我得到所有链接的列表，而不是每个点上的单个图像。理想情况下，我希望每个单独的 player_image 都像年龄和平均排名的 x 和 y 一样显示。

 // 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
    };
  });

   myImage = new Image()
   myImage.src = 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: 10,
        pointHoverRadius: 10,
        pointStyle: myImage,
      }]
    },

我尝试将图像文件名直接放入 MyImage 中，并且每个图像都正确显示了相同的图像。它是包含所有文件目标的数组