在 ChartJs 中的 Linechart 点内添加图像

Question

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

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

在 ChartJs 中可以吗？

Answer 1

正如Chart.js line chart data structure（pointStyle 属性）中所说：

pointStyle
字符串、数组、图像、数组
点的风格。选项有'circle'、'triangle'、'rect'、'rectRot'、'cross'、'crossRot'、'star'、'line'和'dash'。 如果选项是图像，则使用 drawImage 在画布上绘制该图像。

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

---

您可以像这样使用Chart.js plugins 来做到这一点：

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

并且会给你this result。