将gif图像添加到chart.js V2.0中

Add gif images to the chart.js V2.0

本文关键字：js V2 chart gif 图像 添加      更新时间：2023-09-26

我想像在这里链接一样将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);
      })
    }
  }
});
相关文章：