在ChartJs中的Linechart点内添加图像

Question

我正在使用ChartJs开发项目。我正在尝试在line chart内添加图标图片，而不是points。

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

ChartJs有可能吗？

Answer 1

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

  

<强> pointStyle
   String，Array＆lt; String＆gt;，Image，Array＆lt;图像＆gt;
  点的风格。选项包括＆＃39;＆＃39;，＆＃39;＆＃39;＆＃39; rect＆＃39;＆＃39; rectRot＆＃39;＆＃39; cross＆＃39;，＆＃39; ; crossRot＆＃39;，＆＃39; star＆＃39;，＆＃39; line＆＃39;和＆＃39; dash＆＃39;。 如果该选项是图像，则使用 drawImage 在画布上绘制该图像。

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

<小时/> 你可以使用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。