chart.js V2.0添加gif图片

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