Использование фонового изображения с круговой диаграммой JavaScript

Question

Я создаю приложение в Rails и использую гем под названием easy_as_pie что позволяет мне использовать этот плагин 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;
  }
});

Я надеялся заставить работать градиент, а затем пытался манипулировать функцией для загрузки изображения. Но мне не удалось даже заставить работать градиент.

Answer 1

При условии, что ваш пример градиента работает так, как он выглядит, вы сможете рисовать практически все, что хотите, в 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";