Javascript 在ChartJS散点图中显示图像而不是点

我试图用PNG图像替换散点图的点。根据文档，

pointStyle

接受字符串或图像。但是，它不是第一个点上的图像，而是显示一个规则的散点图点。有什么想法吗

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var img=新图像（）；
var img1=img.src='assets/img/small/STORM.png'；
var imageData={
数据集：[{
pointStyle:[img1，'矩形'，'三角形'，'圆形']，
数据：[{
x:1.447377，
y:-0.014573
}, {
x:2.365398，
y:-1.062847
}, {
x:-2.507778，
y:0.389309
}, {
x:-0.432636，
y:0.124841
}]
}]
}
var myChart=新图表（ctx{
键入：“散布”，
数据：imageData，
选项：{}
});

根据，
pointStyle
是
字符串
或
图像
，但不是数组

如果您想为您的积分设置个人，可以使用。它提供了几个钩子，可用于执行自定义代码。您可以使用
afterDraw
钩子为每个点指定不同的
pointStyle

plugins: {
  afterUpdate: function(chart) {
    const meta = chart.getDatasetMeta(0);
    meta.data[0]._model.pointStyle = img;
    meta.data[1]._model.pointStyle = 'rect';
    meta.data[2]._model.pointStyle = 'triangle';
    meta.data[3]._model.pointStyle = 'circle';
  }
},

我在下面修改了您的代码，我使用了稍微不同但更紧凑的方法，并在图表配置之外定义了
pointStyles
数组


const img=new Image（）；
img.src=https://i.stack.imgur.com/gXQrT.png';
常量点样式=[img，'rect'，'triangle'，'circle']；
新图表（document.getElementById（'myChart'）{
键入：“散布”，
插件：{
更新后：图表=>{
chart.getDatasetMeta（0）.data.forEach（（d，i）=>d.\u model.pointStyle=pointStyles[i]）；
}
},
数据：{
数据集：[{
数据：[
{x:1.447377，y:-0.014573}，
{x:2.365398，y:-1.062847}，
{x:-2.507778，y:0.389309}，
{x:-0.432636，y:0.124841}
],
背景颜色：[“白色”、“绿色”、“红色”、“橙色”]，
点半径：10
}]
},
选项：{
图例：{
显示：假
}
}
});