在ChartJs中的Linechart点内添加图像

Question

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

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

ChartJs有可能吗？

Answer 1

正如Chart.js折线图中的数据结构(pointStyle属性)所述:

pointStyle
String,Array <String>,Image,Array <Image>
点的样式.选项包括'circle','triangle','rect','rectRot','cross','crossRot','star','line'和'dash'.如果选项是图像,则使用drawImage在画布上绘制该图像.

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

你可以使用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;
    }
});

并会给你这个结果.