0

私は Rails でアプリを構築してeasy_as_pieいます。「Easy Pie Chart」( http://rendro.github.io/easy-pie-chart/ )と呼ばれるこの Jquery プラグインを使用できるようにするという gem を使用しています。

次のコードを使用して、円グラフを問題なく動作させています。

$(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 に答える