Geek Answers Handbook

Chart.js Pie chart: how to set a background image for a segment

I use Chart.js to create a pie chart (see below). Instead of colors in each pie segment, I would like to use a background image.

Could you give me a pointer on how I can do this?

Thank!

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    }
];
var myPieChart = new Chart(ctx[0]).Pie(data,options);
+4
source share
1 answer

Subclass Pie, rewrite initializer and addData - override a draw in the initializer by adding one line:

if(this.bg_img)ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat");

right after he says:

ctx.fillStyle = this.fillColor;

(copy Pie draw, add this line - or just copy my AltPie subclass at the bottom of the attached scripts). This may be different for later versions, but the fact that Chart.js 1.01.

Pie (, bg_img) . , addData AltPie :

bg_img : segment.bg_img,

, -

fillColor : segment.color,

- , , , . ,

....img=new Image();...img.src=...and - img.onload=function()(..recurse-load-next,

, № 2 : fooobar.com/questions/301423/...
, , , Chart.js, , , AltPie.

, , , . html5

(ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat"))

- , , № 2 : fooobar.com/questions/301423/....

. https://jsfiddle.net/arlon_arriola/pkwftkp2/

- Chart.js(v1.01?) ( / , , relvant ), ./imgs/patterns/ jquery (1.9?). ( )

, , , , , .

+1

More articles:


All Articles