Javascript 从Chart.js中的一个数据集中设置单个点的样式

我正在尝试使用Chart.js创建时间线。 我的目标是有一行显示游戏中发生的各种图标/事件。 通过使用折线图并删除线，只留下点，可以在时间线上放置标记

通过将图像变量指定给数据集的pointStyle属性，可以将这些点显示为自定义图像

对于单个图像，这非常好，正如您在下面的代码片段中所看到的

//创建图像
const img=新图像（20,20）；
img.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Skull_Icon_%28Noun_Project%29.svg/1200px-骷髅图标项目%28名词项目%29.svg.png”；
var ctx=document.getElementById（'chart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
数据集：[
{
标签：“死亡”，
数据：[{x:“00:01:23”，y:0}，{x:“00:03:41”，y:0}，{x:“00:04:29”，y:0}，{x:“00:05:35”，y:0}，{x:“00:06:27”，y:0}，{x:“00:07:07”，y:0}，{x:“00:08:48”，y:0}，{x:“00:09:31”，y:0}，{，
//在“点样式”属性中指定图像
点样式：img，
展示线：错，
填充：假，
提示：“玩家死亡”，
边框颜色：#000000“，
背景颜色：“000000”
},
]},
//剩下的只是造型而已
选项：{
互动：{
模式：“最近的”
},
工具提示：{
自定义：函数（工具提示）{
如果（！工具提示）返回；
tooltip.displayColor=false；
},
回调：{
标题：函数（工具提示项、数据）{
返回数据。数据集[tooltipItem[0]。数据集索引]['tooltip']；
},
标签：函数（工具提示项、数据）{
返回tooltipItem.xLabel；
}
}
},
图例：{
显示：真
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
解析器：“hh:mm:ss”，
tooltipFormat:'HH:mm:ss'，
显示格式：{
第二个：“HH:mm:ss”
},
单位步长：30
},
滴答声：{
fontColor：“白色”
}
}],
雅克斯：[{
滴答声：{
显示：假，
},        
网格线：{
显示：假
}
}]
}
}
});
您可以通过阵列添加不同的图像


//创建图像
const img=新图像（20,20）；
img.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Skull_Icon_%28Noun_Project%29.svg/1200px-骷髅图标项目%28名词项目%29.svg.png”；
const img2=新图像（20,20）；
img2.src=”https://pngimg.com/uploads/pacman/pacman_PNG21.png";
常数img3=新图像（20,20）；
img3.src=”https://pngimg.com/uploads/pacman/pacman_PNG70.png"
var ctx=document.getElementById（'chart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
数据集：[{
标签：“死亡”，
数据：[{
x:“00:01:23”，
y:0
}, {
x:“00:03:41”，
y:0
}, {
x:“00:04:29”，
y:0
}, {
x:“00:05:35”，
y:0
}, {
x:“00:06:27”，
y:0
}, {
x:“00:07:07”，
y:0
}, {
x:“00:08:48”，
y:0
}, {
x:“00:09:31”，
y:0
}],
//在“点样式”属性中指定图像
pointStyle:[img2、img、img3]，
展示线：错，
填充：假，
提示：“玩家死亡”，
边框颜色：#000000“，
背景颜色：“000000”
}, ]
},
//剩下的只是造型而已
选项：{
互动：{
模式：“最近的”
},
工具提示：{
自定义：函数（工具提示）{
如果（！工具提示）返回；
tooltip.displayColor=false；
},
回调：{
标题：函数（工具提示项、数据）{
返回数据。数据集[tooltipItem[0]。数据集索引]['tooltip']；
},
标签：函数（工具提示项、数据）{
返回tooltipItem.xLabel；
}
}
},
图例：{
显示：真
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
解析器：“hh:mm:ss”，
tooltipFormat:'HH:mm:ss'，
显示格式：{
第二个：“HH:mm:ss”
},
单位步长：30
},
滴答声：{
fontColor：“白色”
}
}],
雅克斯：[{
滴答声：{
显示：假，
},
网格线：{
显示：假
}
}]
}
}
});
非常感谢您的帮助！这个解决方案非常适合我！