gif画像をchart.jsに追加する01200

Question

ここで行われるように、gif画像をchart.jsに追加したいと考えていますa link！/しかし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; 
 
     [ 
 
     \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 
 
    });

Answer 1

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); 
     }) 
    } 
    } 
});