1

我想将 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
  });

4

1 回答 1

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);
      })
    }
  }
});
于 2016-05-16T09:54:34.670 回答