CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Nits
Nits

Reputation: 649

add border to the outer area of slice in pie

http://jsfiddle.net/wm7pwL2w/8/

How can I add border to the outer area of slice in pie? Please check my jsfiddle. I have implemented Polar Area Chart here. I need each border to be of different color which I can specify. For example refer to this image enter image description here

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
console.log(ctx);

var center = {
x: 200,
y: 150
};
var myColor = ["#ccc", "#ccc", "#ccc", "#ccc", "#c01c3f"];
var myData = [20, 40, 50, 70, 100];
var myRadius = [150, 120, 80, 100, 70];
var myDistance = [5, 5, 2, 2, 2];
var myText = ['first', 'second', 'third', 'fourth', 'fifth'];

function getTotal(data) {
var myTotal = 0;
for (var j = 0; j < data.length; j++) {
    myTotal += (typeof data[j] == 'number') ? data[j] : 0;
}
return myTotal;
}

function plotData() {
var lastend = 0;
var myTotal = getTotal(myData);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
//ctx.strokeStyle = 'rgba(255,255,255,0.5)';
ctx.lineWidth = 1;
ctx.font="15px Arial";
for (var i = 0; i < myData.length; i++) {
    ctx.save();
    ctx.fillStyle = myColor[i];
    ctx.beginPath();
    ctx.translate(center.x, center.y);
    var thisAngle = (Math.PI * 2 * (myData[i] / myTotal));
    ctx.rotate(lastend + thisAngle / 2);
    ctx.translate(myDistance[i], 0);
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2, false);
    ctx.closePath();
    ctx.fill();
   // ctx.stroke();
    ctx.fillStyle = '#fff';
    ctx.translate(0.6 * myRadius[i], 0);
    ctx.rotate(-(lastend + thisAngle / 2));
    ctx.fillText(myText[i], 0, 0);
    ctx.restore();
    lastend += thisAngle;
}
}

plotData();

Thanks for all the help.

Upvotes: 3

Views: 715

Answers (2)

user1693593
user1693593

Reputation:

You need to do it in two steps, first fill the shape then stroke just an arc. To do so you need to use a beginPath() for the outer border after filling it so to not stroke the complete shape.

...
ctx.closePath();
ctx.fill();
// original code stops

// insert this code
ctx.beginPath();
ctx.strokeStyle = '#079';
ctx.lineWidth = 9;
ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2);
ctx.stroke();

// original code continues...
// ctx.stroke();
ctx.fillStyle = '#fff';
...

Updated fiddle

Upvotes: 3

Gilsha
Gilsha

Reputation: 14591

Use strokeStyle. JSFiddle

var lineColor = ["blue", "green", "purple", "pink", "aqua"];
for (var i = 0; i < myData.length; i++) {
    ............................
    ctx.strokeStyle = lineColor[i];
    ctx.fillStyle = myColor[i];
    ........
    .............
    ctx.fill();
    ctx.stroke();
    ......................
}

Upvotes: 0

Related Questions