我想像在这里链接一样将gif图像添加到chart.js中!/但在chart.js.的最新版本(2.0)中
这是一个非常适用于.png图像但不适用于.gif图像的代码,它也不适用于chart.js的V2.0。请帮助
提前感谢:)
var img = new Image();
var size = 48;
Chart.types.Line.extend({
name: "LineAlt",
draw: function() {
Chart.types.Line.prototype.draw.apply(this, arguments);
var scale = this.scale;
[
{ x: 2, 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 data = {
labels: ["Dec", "Jan", "Feb", "March", "April", "May", "June"],
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, {
scaleBeginAtZero: true
});
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
var scale = this.scale;
[
{ x: 2, y: 50 },
{ x: 4, y: 10 }
].forEach(function(p) {
ctx.drawImage(img,xaxis.getPixelForValue(undefined, p.x) - size / 2, yaxis.getPixelForValue(p.y) - size / 2, size, size);
})
}
}
});