Question

在我的画布饼图中，我试图让我的标签主要使用以下代码片段显示A，B或C：

    var PI2 = Math.PI * 2;
var myColor = ["white", "white", "white"];
var myData = [30, 60, 29];
var myLabels = ["A", "B","C"]
var cx = 150;
var cy = 150;
var radius = 80;

pieChart(myData, myColor, myLabels);



     // draw the the label at end of sector
  var midAngle = endAngle ;
  var labelRadius = radius * 1.5;
  var x = cx + (labelRadius) * Math.cos(midAngle);
  var y = cy + (labelRadius) * Math.sin(midAngle);
  ctx.fillStyle = 'blue';
  ctx.fillText(myLabels, x, y);

此处的完整代码：http://jsfiddle.net/2mf8gt2c/8/

但是，每个标签都显示MyLabels的所有三个字母。我尝试在myLabels之后添加[i]，但之后只出现一个扇区。

如何让每个标签显示各自的字母？

谢谢！

Answer 1

向drawWedge函数添加第五个参数，并在调用for循环内的函数时，将myLabels[i]作为第五个参数传递。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

ctx.lineWidth = 2;
ctx.font = '12px verdana';

var PI2 = Math.PI * 2;
var myColor = ["white", "white", "white"];
var myData = [30, 60, 29];
var myLabels = ["A", "B", "C"];
var cx = 150;
var cy = 150;
var radius = 80;

pieChart(myData, myColor, myLabels);

function pieChart(data, colors, myLabels) {

   var total = 0;
   for (var i = 0; i < data.length; i++) {
      total += data[i];
   }

   var sweeps = []
   for (var i = 0; i < data.length; i++) {
      sweeps.push(data[i] / total * PI2);
   }

   var accumAngle = 0;
   for (var i = 0; i < sweeps.length; i++) {
      drawWedge(accumAngle, accumAngle + sweeps[i], colors[i], data[i], myLabels[i]);
      accumAngle += sweeps[i];
   }

}

function drawWedge(startAngle, endAngle, fill, label, letter) {

   // draw the wedge
   ctx.beginPath();
   ctx.moveTo(cx, cy);
   ctx.arc(cx, cy, radius, startAngle, endAngle, false);
   ctx.closePath();
   ctx.fillStyle = fill;
   ctx.strokeStyle = 'black';
   ctx.fill();
   ctx.stroke();

   // draw the label in middle of sector
   var midAngle = startAngle + (endAngle - startAngle) / 2;
   var labelRadius = radius * 0.5;
   var x = cx + (labelRadius) * Math.cos(midAngle);
   var y = cy + (labelRadius) * Math.sin(midAngle);
   ctx.fillStyle = 'green';
   ctx.fillText(label, x, y);

   // draw the label in middle of arc on exterior
   var midAngle = startAngle + (endAngle - startAngle) / 2;
   var labelRadius = radius * 1.25;
   var x = cx + (labelRadius) * Math.cos(midAngle);
   var y = cy + (labelRadius) * Math.sin(midAngle);
   ctx.fillStyle = 'black';
   ctx.fillText(label, x, y);

   // draw the the label at start of sector
   var midAngle = startAngle;
   var labelRadius = radius * 1.25;
   var x = cx + (labelRadius) * Math.cos(midAngle);
   var y = cy + (labelRadius) * Math.sin(midAngle);
   ctx.fillStyle = 'red';
   ctx.fillText(label, x, y);

   // draw the the label at end of sector
   var midAngle = endAngle;
   var labelRadius = radius * 1.5;
   var x = cx + (labelRadius) * Math.cos(midAngle);
   var y = cy + (labelRadius) * Math.sin(midAngle);
   ctx.fillStyle = 'blue';
   ctx.fillText(letter, x, y);

}

<section>
   <div>
      <table width="80%" cellpadding=1 cellspacing=1 border=0>
         <tr>
            <td width=50%>
               <canvas id="canvas" align="center" width="400" height="300"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
            </td>
         </tr>
      </table>
   </div>
</section>

画布饼图：有ctx.FillText（）问题所以我的标签没有正确显示

1 个答案: