将gif图像添加到chart.js V2.0
问题描述:
我想将gif图像添加到chart.js,就像它在这里完成的方式a link!/但在chart.js的最新版本(2.0)中。将gif图像添加到chart.js V2.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;
[
\t { 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);
})
}
}
});
+0
但它仍然无法呈现gif图像 – Hellboy
,我发现经过一番艰苦的工作解决方案,并在这里张贴如果有一个人需要它。 – Hellboy