在ChartJs中的Linechart点内添加图像

我正在使用ChartJs开发一个项目。 我想在line chart添加图标图像而不是points 。

我附上了一张图片，其中我展示了上述要求。 在该图像中，有一个ChartJs图像和一个参考图像。 我想在ChartJs的折线图中添加一个与参考图像（太阳和云图标）完全相同的图像。

ChartJs有可能吗？

Answer 1

正如Chart.js折线图中的数据结构 （ pointStyle属性 ）所述：

pointStyle
String，Array ，Image，Array
点的风格。 选项包括’circle’，’triangle’，’rect’，’rectRot’，’cross’，’crossRot’，’star’，’line’和’dash’。 如果选项是图像，则使用drawImage在canvas上绘制该图像 。

因此，您只需编辑图表并在特定数据的pointStyle属性中放置图像而不是默认circle 。

---

你可以使用Chart.js这样的插件来做到这一点：

 // Variables 'sun' and 'cloud' are created before with `new Image()` Chart.pluginService.register({ afterUpdate: function(chart) { chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun; chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud; } }); 

并会给你这个结果 。