将图像/图标添加到chart.js中的特定坐标

gorkyyrv  于 2023-05-22  发布在  Chart.js
关注(0)|答案(2)|浏览(181)

是否可以将特定图像/图标添加到折线图中的特定坐标?这些点可能与线点不同。
我搜索了很多,但我找不到任何比定制工具提示内容样式更进一步的东西。
我想在一些点上添加星星或类似的形状来表示特殊事件。

jk9hmnmh

jk9hmnmh1#

您可以扩展图表(覆盖draw方法,以在原始draw函数之后绘制图标)来完成此操作

预览

脚本

var img = new Image();
img.onload = function() {
  var size = 48;

  Chart.types.Line.extend({
    name: "LineAlt",
    draw: function() {
      Chart.types.Line.prototype.draw.apply(this, arguments);

      var scale = this.scale;
      [
        { x: 1.5, y: 50 }, 
        { x: 4, y: 10 }
      ].forEach(function(p) {
        ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size);
      })
    }
  });

  ...

  var myLineChart = new Chart(ctx).LineAlt(data, {
    scaleBeginAtZero: true
  });
}

img.src = "<< image url >>";

图片来源:Everaldo Coelho和YellowIcon LGPL(http://www.gnu.org/licenses/lgpl.html),via Wikimedia Commons

  • 请注意,您需要等待映像加载。
  • 如果要在数据值确定的比例范围之外的坐标上绘制图像,则需要覆盖比例。

小提琴-http://jsfiddle.net/rhzzpat0/

hi3rlvi2

hi3rlvi22#

您可以创建一个自定义插件。您可以根据图表和数据调整x和y坐标。请注意,本Map像不能使用,您需要有图像托管或您可以使用base-64 url。

const CustomImage = {
id: 'customImage',
afterDraw(chart, args, options) {
const {
  ctx,
  chartArea: { left, top, width, height }
} = chart
ctx.save()

const img = new Image()
img.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAXCAYAAAAcP/9qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALQSURBVHgBxVY9TFNRFP4oFfkRUyo1iAlp0hAkYYAEN0AX+VlMGQgjdDDByZi4YDSGwbipqKOxdSCxU4VFhUEENhBJrNEoldLEplFoq21phdbrOc+UtH33PZsYy5fcpL33vfud795zvvMghBihERGlwwZzlvEPAFaUFlEmFjgAGPUWM/4IYpOLSD714lc0RSOJivZGHKJRM9qJmVQQS6tefAoEEd9J4kh1FZqbGtHffRoDXZ16W0NTcfTyDOKuZdRe6kaVvQ1Gax0MpirsrhEJBZNwrWDBJtDyYBgtPW2oJdIYka9vBvFsaRlrHz5j/MIwOk7ZiicOO9zIkLpjzmGFLBeJxysIj7r3/xutZhx/OYZyCiwXb977cOvhEzgG+6TqDYUT3ydmFVKLZ1RFykefS8pI+8PYdrhVG3e02jA5fhFOz6xyFbrEvDEfYd2d85Dh26BLOv9z3qecRCFO1Jsx1NuF+1PT+sSs9s99mlUP7tHd8tACByzDUF8P1klxaCuiTcyJUzMiz8bUKx/0wKoFXZEMfMeLr73axKyIy0WGXR21++/7I9L5Bjry0FZYm/hfoaVYhjxirtX0pjxqY0G5yKB1WqyWzUWTuOKsTXEpGQ6fkRtBFlzHZQXll8Xi6ju0t9q0iTmx4neXpC9XUlDlOqrZ4WRgS6VLUDmYQb25SbFLGbTqmwNi7y4El9C9qRk47L2qNVVymckmd+i4f0zMqR7mGj9641zeXJmpEvWeEZXLMenVSRc1jE4MUNNQQdap9za2xRfrTRFqvy1S8+uq9a92pwjgivhouS4Cc2/z1mKJpHjkeSEGxq4J9/MFza8B3X6coO7EbTHjjyqtkMslTbVqIJXVlA9OSxizXq9ijZy1nL3cofq7qC2S0uamk1pbo6gPAe7DWQNhOy0sLaUfJ5JosJgpiL+XXdHE/wOcXPMoPaZZsYl+2FG6D74oDddvkqP2kRLQOxsAAAAASUVORK5CYII='

const imgWidth = 30
const imgHeight = 22.5
const imgX = 350
const imgY = 110
ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight)

ctx.restore()
}
}

export default CustomImage

相关问题