在ChartJS图表区域中添加图像作为背景[不添加到画布]

rfbsl7qr  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(175)

有没有办法在图表区添加图片[我用的是chart JS气泡图],目前我是通过css在画布上添加图片的。

wfveoks0

wfveoks01#

"最好的方法是在画布上画出来"
实现这一点的最好方法是直接在画布上绘制它,因为您可以直接访问和控制像素,所以您可以确保它是完美对齐的像素。
在灯具上扩展答案,但使其仅在图表区域内绘制:
第一个

没有在画布上绘图的替代方法

如果你真的不想在画布上绘制它,而是使用一个普通的img元素,你可以使用一个绝对位置,并使用一个自定义插件来正确地定位它,缺点是画布像素似乎与CSS不同,所以它们不能1:1使用,必须近似,这可能会导致轻微的对齐问题:
第一个

uqxowvwt

uqxowvwt2#

Plugin Core API提供了一系列钩子,可以用来执行自定义代码。例如,你可以使用beforeDraw通过CanvasRenderingContext2D.drawImage()绘制图像。但这实际上是直接在画布上绘制图像。

plugins: [{
  beforeDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var image = new Image();
    image.src = 'https://i.stack.imgur.com/S7tJH.png';
    imageSize = 250;
    ctx.drawImage(image, chart.chart.width / 2 - imageSize / 2, chart.chart.height / 2 - imageSize / 2, imageSize, imageSize);
    ctx.restore();
  }
}],

请看下面的可运行代码片段。
第一次

相关问题