如何在chartjs中的每个气泡上应用图像？

Question

我正在按照给定的示例进行工作。 https://www.chartjs.org/docs/latest/samples/other-charts/bubble.html

我有一个问题，渲染时如何在每个气泡上应用图像？ 目前，我只能通过传递颜色十六进制或颜色十六进制数组来使用

backgroundColor

更改气泡颜色。我想使用图像而不是颜色来表示图表中的每个气泡显示。

有什么解决办法可以实现吗？谢谢！

Answer 1

可以，但不会达到您预期的结果。

如果将

pointStyle

属性设置为图像，如下所示：

myImage = new Image()
myImage.src = 'img/image.png';

...

const data = {
    labels: [...],
    datasets: [
        {
            label: 'Something',
            data: [...your data...],
            pointStyle: myImage,     ///// SET IMAGE FOR BUBBLE
        }
    ]

}

然而，图像的

尺寸不再由气泡半径r

决定。据我所知，目前这是不可能的，除非您想出一种方法来自行管理与 

r

 相关的图像大小。

Answer 2

您可以使用

chartjs-plugin 来做到这一点。在您的项目中添加 chartjs-plugin.js 并使用以下代码在每个气泡上添加图像。

以下代码将在每个气泡上添加特定图像。

var icon = new Image();
icon.src = baseURL + "assets/user/images/mood_trend_sad_icon.png";
icon.width = 22;
icon.height = 22;

combinedProgressChart = new Chart(chartCanvas, {
    type: 'bubble',
    data: chartData,
    options: chartOptions,
    plugins: [{
        afterUpdate: function (chart, options) {
            chart.getDatasetMeta(0).data.forEach((d, i) => {
                d._model.pointStyle = icon;

            })
        },
    }]
});

下面的代码将添加动态图像。

combinedProgressChart = new Chart(chartCanvas, {
    type: 'bubble',
    data: chartData,
    options: chartOptions,
    plugins: [{
        afterUpdate: function (chart, options) {
            chart.getDatasetMeta(0).data.forEach((d, i) => {

                var icon = new Image();
                icon.src = jsonUserData[i].avatar;
                icon.width = 22;
                icon.height = 22;

                d._model.pointStyle = icon;

            })
        },
    }]
});