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

lqfhib0f  于 2023-10-18  发布在  Chart.js
关注(0)|答案(2)|浏览(158)

我正在按照所给的样品工作。https://www.chartjs.org/docs/latest/samples/other-charts/bubble.html
我有一个问题,我如何在渲染时将图像应用到每个气泡上?目前我只能通过传递颜色十六进制或颜色十六进制数组来改变backgroundColor的气泡颜色。我想用图像而不是颜色来表示我的图表中的每个气泡显示。
有什么办法可以实现吗?谢谢你,谢谢

enyaitl3

enyaitl31#

你可以,但不是你所期望的结果。
如果您将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由你自己。

0s0u357o

0s0u357o2#

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

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;

            })
        },
    }]
});

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

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;

            })
        },
    }]
});

我这边的结果:

相关问题