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

Question

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

我搜索了很多，但我找不到比定制工具提示内容风格更多的东西。

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

Answer 1

可以扩展图表（重写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 >>"; 

Credits：Image by Everaldo Coelho and YellowIcon; LGPL（http://www.gnu.org/licenses/lgpl.html），via Wikimedia Commons

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

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

---

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