Add a border to the outside of the slice in the pie
http://jsfiddle.net/wm7pwL2w/8/
How do I add a border to the outer area of a slice in pie? Please check my jsfiddle. I have introduced the polar zone here. I need each border to have a different color that I can specify. For example refer to this image
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 the help.
+3
source to share
2 answers
You need to do this in two steps: first fill in the shape and then stroke only the arc. To do this, you need to use beginPath()
for the outer border after filling it so as not to iron the full 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';
...
+3
source to share
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();
......................
}
0
source to share