chartjs-plugin-datalabels 不支持直接渲染 HTML 图片标签；推荐改用更灵活的 chartjs-plugin-labels 插件，通过 render: 'image' + images 数组配置，为每个扇区标签独立设置图标。
chartjs-plugin-datalabels 不支持直接渲染 html 图片标签；推荐改用更灵活的 chartjs-plugin-labels 插件，通过 `render: 'image'` + `images` 数组配置，为每个扇区标签独立设置图标。
在构建幸运转盘（Wheel of Luck）类交互图表时，常需将默认文字标签（如 "1"、"2"）替换为具有视觉辨识度的图标或奖品缩略图。但 chartjs-plugin-datalabels v2.1.0 本质上是一个文本渲染插件——它基于 Canvas 2D API 绘制纯文本，不解析 HTML 字符串（如 labels 数组中写入 HTML 标签无效，也不会触发图片加载。
✅ 正确解法是切换至专为富媒体标签设计的替代插件：chartjs-plugin-labels（注意：非官方 Chart.js 插件，由 Davide Violante 维护，广泛用于图标/徽章/图片标签场景）。
该插件支持 render: 'image' 模式，并允许为每个数据点指定独立的图片资源：
plugins: {
labels: {
render: 'image', // 启用图片模式（非文本）
images: [
{ src: '/img/prize-1.png', width: 40, height: 40 },
{ src: '/img/prize-2.png', width: 40, height: 40 },
{ src: '/img/prize-3.png', width: 40, height: 40 },
// ... 其余 7 项，一一对应 labels 数组顺序
]
}
}
? 关键注意事项：
-
images数组长度必须严格等于data.labels.length，索引一一对应； -
src支持本地路径、绝对 URL 或 Data URL； -
width/height推荐显式设置，避免拉伸失真；若留空，插件将按原始尺寸渲染（可能溢出扇区）； - 需引入正确 CDN 地址：
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
（注意：包名含
-dv，区别于其他同名插件）
? 进阶技巧：若需动态控制图片（如根据奖品类型加载不同图标），可将 images 设为函数，返回对应配置对象：
images: (context) => {
const prizeId = context.dataIndex + 1;
return {
src: `/img/prizes/${prizeId}.png`,
width: 36,
height: 36
};
}
最后，请移除 chartjs-plugin-datalabels 的引用及 plugins: [ChartDataLabels] 注册，避免插件冲突。完整配置后，你的幸运转盘即可实现「每一块扇区显示专属奖品图标」的效果，兼顾美观性与交互逻辑完整性。
