画布饼图中的标签

Question

我正在使用canvas 制作饼图，但无法将标签放入画布。我尝试了很多东西...你能帮帮我吗？

HTML

<canvas id="can" width="200" height="200" />

JS

var D1 = 15;
var D2 = 15;
var D3 = 45;
var D4 = 25;
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [D1,D2,D3,D4]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ["#ECD078","#D95B43","#C02942","#542437"];
var labels = ["25%","25%","25%","25%"];

for (var e = 0; e < data.length; e++) {
  myTotal += data[e];
  ctx.font = 'bold 15pt Calibri';
  ctx.fillText(labels[e],15,15);
}

for (var i = 0; i < data.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  // Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (data[i] / myTotal);
}

我的意图是将labels[] 编号按顺序排列在饼图中。

Answer 1

如果还不算太晚，您可以试试这个： https://jsfiddle.net/rradik/kuqdwuyd/

<canvas id="canvas" width="200" height="200" />

 var canvas;
        var ctx;
        var lastend = 0;
        var pieColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
    var pieData = [10,30,20,60,40];
        var pieTotal = 10 + 30 + 20 + 60 + 40; // done manually for demo

        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var hwidth = ctx.canvas.width/2;
        var hheight = ctx.canvas.height/2;


        for (var i = 0; i < pieData.length; i++) {
                ctx.fillStyle = pieColor[i];
                ctx.beginPath();
                ctx.moveTo(hwidth,hheight);
                ctx.arc(hwidth,hheight,hheight,lastend,lastend+
                  (Math.PI*2*(pieData[i]/pieTotal)),false);


                ctx.lineTo(hwidth,hheight);
                ctx.fill();

                //Labels on pie slices (fully transparent circle within outer pie circle, to get middle of pie slice)
                //ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; //uncomment for debugging
    //          ctx.beginPath();
    //          ctx.moveTo(hwidth,hheight);
    //          ctx.arc(hwidth,hheight,hheight/1.25,lastend,lastend+
    //            (Math.PI*(pieData[i]/pieTotal)),false);  //uncomment for debugging 

                var radius = hheight/1.5; //use suitable radius
                var endAngle = lastend + (Math.PI*(pieData[i]/pieTotal));
                var setX = hwidth + Math.cos(endAngle) * radius;
                var setY = hheight + Math.sin(endAngle) * radius;
                ctx.fillStyle = "#ffffff";
                ctx.font = '14px Calibri';
                ctx.fillText(pieData[i],setX,setY);

    //          ctx.lineTo(hwidth,hheight);
                //ctx.fill(); //uncomment for debugging

                lastend += Math.PI*2*(pieData[i]/pieTotal);
    }   

可能不是完美且非常有效的，但仍然可以完成工作

Answer 2

问题是你所有的文字都重叠了。

我只是更改了执行顺序。文本现在绘制在饼图之后。还有一件事，我在文本中添加了一个偏移量，每次循环运行时我都会偏移 50。

Working Example

var offset = 50;
for (var e = 0; e < data.length; e++) {
    ctx.font = 'bold 15pt Calibri';
    ctx.fillText(labels[e],offset*e,180);
}