Question 245909 in Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript PieChart Slices – partially fill slices with color

Using JavaScript I am attempting to write a pie-chart to partially fill
the slices with the color as a percentage of the slice area starting from
the center of the circle. The code below is functioning correctly, but fills
the whole of the slice with the color and I want to fill only a percentage
using iNdx of ariFillPercent.

An example showing how to do that would be great.

const ariSizes = [120, 100, 140];
const arsColors = ["#FFDAB9", "#E6E6FA", "#E0FFFF"];
const ariFillPercent = [22, 32, 55];

  //==== FUNCTION ====//
  const handleDrawSegment = (cnv, ctx, iNdx) => {
    ctx.save();
    var centerX = Math.floor(cnv.width / 2);
    var centerY = Math.floor(cnv.height / 2);
    let radius = Math.floor(cnv.width / 2);

    var startingAngle = handleDegreesToRadians(handleSumTo(ariSizes, iNdx));
    var arcSize = handleDegreesToRadians(ariSizes[iNdx]);
    var endingAngle = startingAngle + arcSize;

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius,
      startingAngle, endingAngle, false);
    ctx.closePath();

    ctx.fillStyle = arsColors[iNdx];
    ctx.fill();

    ctx.restore();
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Multiply the radius by the percentage. This appears to work.

     let radius = (Math.floor(cnv.width / 2) * (ariFillPercent[iNdx]/100));

  2. 0

    Try this

    const ariSizes = [120, 100, 140];
const arsColors = ["#FFDAB9", "#E6E6FA", "#E0FFFF"];
const ariFillPercent = [22, 32, 55];


const handleDegreesToRadians = (degrees) => (degrees * Math.PI) / 180;

//==== FUNCTION ====//
const handleDrawSegment = (cnv, ctx, iNdx) => {
    ctx.save();
    var centerX = Math.floor(cnv.width / 2);
    var centerY = Math.floor(cnv.height / 2);
    let radius = Math.floor(cnv.width / 2);

    var startingAngle = handleDegreesToRadians(handleSumTo(ariSizes, iNdx));
    var arcSize = handleDegreesToRadians(ariSizes[iNdx]);
    var endingAngle = startingAngle + arcSize;

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);

    const fillAngle = handleDegreesToRadians((ariFillPercent[iNdx] / 100) * ariSizes[iNdx]);

    ctx.arc(centerX, centerY, radius, startingAngle, startingAngle + fillAngle, false);
    ctx.lineTo(centerX, centerY);
    ctx.closePath();

    ctx.fillStyle = arsColors[iNdx];
    ctx.fill();

    ctx.restore();
};

const handleSumTo = (arr, index) => {
    let sum = 0;
    for (let i = 0; i < index; i++) {
        sum += arr[i];
    }
    return sum;
};

// Example usage:
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

// Call handleDrawSegment for each slice
for (let i = 0; i < ariSizes.length; i++) {
    handleDrawSegment(canvas, context, i);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search