0

我正在 Rails 中构建一个应用程序，我正在使用一个名为的 gem easy_as_pie，它使我能够使用这个名为“Easy Pie Chart”的 Jquery 插件（http://rendro.github.io/easy-pie-chart/）

我的饼图工作没问题，使用以下代码：

$(document).ready(function() {
  $('.chart').easyPieChart({
    size: 300,
    animate: 1400,
    lineWidth: 150,
    lineCap: "butt",
    scaleColor: false,
    trackColor: "black",
    barColor: "white"
  });
});

我的问题是，是否可以让图表加载背景图像而不是纯色。在文档中，它允许您使用带有函数的渐变，使用以下代码：

new EasyPieChart(element, {
  barColor: function(percent) {
    var ctx = this.renderer.ctx();
    var canvas = this.renderer.canvas();
    var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#ffe57e");
        gradient.addColorStop(1, "#de5900");
    return gradient;
  }
});

我希望让渐变工作，然后尝试操纵函数加载到图像中。但是我什至无法使渐变起作用。

4

1 回答 1

0

如果您的渐变示例像它看起来的那样工作，您应该canvas能够在他们提供的对象中绘制任何您想要的东西。考虑到这一点，您也许可以像这样绘制图像：

new EasyPieChart(element, {
  barColor: function(percent) {
    var ctx = this.renderer.ctx();
    var canvas = this.renderer.canvas();
    var yourImage = new Image(); 
    yourImage.src = "path-to-your-img.jpg";
    return ctx.drawImage(yourImage);
  }
});

但是，Image对象，如<img>标签，需要向服务器发出进一步的 GET 请求才能实际加载它们，所以上面的方法可能实际上不起作用（抱歉逗笑）。相反，您必须等待该图像加载后再调用它，例如：

// Instantiate the image, it's blank here.
var yourImage = new Image();

// Add a callback that uses the fully-loaded img
yourImage.onload = function() {
  new EasyPieChart(element, {
    barColor: function(percent) {
      var ctx = this.renderer.ctx();
      var canvas = this.renderer.canvas();
      return ctx.drawImage(yourImage);
    }
  });
};

// Set the src, that queues it for the actual GET request.
yourImage.src = "path-to-your-img.jpg";
于 2015-05-04T19:30:25.697 回答