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

Question

是否可以将特定图像/图标添加到折线图中的特定坐标？这些点可能与线点不同。

我搜索了很多，但除了自定义工具提示内容样式之外，我找不到任何其他内容。

我想在某些点上添加星星或类似的形状来表示特殊事件。

Answer 1

您可以扩展图表（覆盖draw方法以在原始draw功能之后绘制图标）来执行此操作

预览

https://support.google.com/accounts/answer/151657?hl=en

<强>脚本

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（），来自Wikimedia Commons

• 请注意，您需要等待图片加载。

• 如果您要在由数据值确定的比例范围之外的坐标上绘制图像，则需要覆盖比例。

小提琴 - http://www.gnu.org/licenses/lgpl.html