Canvas餅圖：有ctx.FillText（）問題，所以我的標籤沒有正確顯示

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>