Comment ajouter le texte dans le camembert?

J'ai créé le camembert tout semble très bien, mais je ne peux pas insérer le texte dans chaque section du graphique à secteurs tels que "données 1" ou "données 2". Je sais qu'il y a la méthode du texte de remplissage mais dans ce cas, je ne peux pas remplir le texte avec la position x et la position y. Avez-vous une idée?Comment ajouter le texte dans le camembert?

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;"> 
</canvas> 

<script> 

function draw() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 

    // Colors 
    var colors = ['red', 'green', 'yellow', 'black', 'purple']; 


    // store beginning angle and ending angle 
    var beginAngle = 0; 
    var endAngle = 0; 
    // data input 
    var data =[10,10,10,10,10] 
    var total = 0; 
    //sum of data 
    for(i=0;i<data.length;i++){ 
    total = total + data[i]; 

    } 
    // Iterate through the angles 
    for(var i = 0; i < data.length; i = i + 1) { 
    beginAngle= endAngle;//begin angle 
    endAngle = endAngle+((Math.PI*2)*(data[i]/total));//end angle 

    ctx.beginPath(); 
    // Fill color 
    ctx.fillStyle = colors[i]; 

    //create each arc of the pie chart 
    ctx.moveTo(200, 200); 
    ctx.arc(200, 200, 120, beginAngle,endAngle); 
    ctx.lineTo(200, 200); 
    ctx.stroke(); 

    // Fill 
    ctx.fill(); 
    } 
} 
window.onload = draw; 


</script> 


</body> 
</html>

Source

2017-10-05 lkh

Salut, j'ai modifié votre code. Vous devez calibrer la position de chaque pièce avec Cosinus (axe X) et sinus (axe Y) et définir le texte avec la position et le texte avec cancas.getContext ("2d) .fillText (" texte ", x, y)

HTML

<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid 
#d3d3d3;"> 
</canvas> 
</body>

function draw() { 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

// Colors 
var colors = ['red', 'green', 'yellow', 'black', 'purple']; 


// store beginning angle and ending angle 
var beginAngle = 0; 
var endAngle = 0; 
// data input 
var data = [10, 10, 10, 10, 10] 
var total = 0; 
//sum of data 
for (i = 0; i < data.length; i++) { 
    total = total + data[i]; 

} 
// Iterate through the angles 
for (var i = 0; i < data.length; i = i + 1) { 
    beginAngle = endAngle; //begin angle 
    endAngle = endAngle + ((Math.PI * 2) * (data[i]/total)); //end angle 

    ctx.beginPath(); 
    // Fill color 
    ctx.fillStyle = colors[i]; 
    //create each arc of the pie chart 
    ctx.moveTo(200, 200); 
    ctx.arc(200, 200, 120, beginAngle, endAngle); 
    ctx.lineTo(200, 200); 
    ctx.stroke(); 
    ctx.fill() 

    // Set Text 
    var pieRadius = Math.min(ctx.canvas.width/2, ctx.canvas.height/2); 
    var labelX = ctx.canvas.width/2 + (pieRadius/2) * Math.cos(beginAngle + (endAngle - beginAngle)/2); 
    var labelY = ctx.canvas.height/2 + (pieRadius/2) * Math.sin(beginAngle + (endAngle - beginAngle)/2) 
    ctx.fillStyle = "white"; 
    ctx.font = "bold 10px Arial"; 
    ctx.fillText("test", labelX, labelY); 

    // Fill 
} 
} 
draw()

Working fiddle

Mais à la place en utilisant Canvas vous pouvez utiliser Highchart Pie Diagramm with Highchart

Source

2017-10-05 13:05:04

wow ça fonctionne comme un charme Merci je vais vérifier HIghChart plugin merci – lkh

Comment ajouter le texte dans le camembert?

Répondre

Questions connexes