원형 차트 내부에 텍스트를 추가하는 방법은 무엇입니까?

모든 것을 멋지게 만든 파이 차트를 만들었지 만 "데이터 1" 또는 "데이터 2"과 같은 원형 차트의 각 섹션 안에 텍스트를 삽입 할 수 없습니다. 채우기 텍스트 메서드가 있지만이 경우에는 x 위치와 y 위치로 텍스트를 채울 수 없습니다. 너는 어떤 생각을 가지고 있니?원형 차트 내부에 텍스트를 추가하는 방법은 무엇입니까?

<!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>

출처

2017-10-05 lkh

안녕하세요. 코드를 편집했습니다. 모든 조각의 위치를 Cosinus (X Axis)와 Sinus (Y Axis)로 계산하고 cancas.getContext ("2d) .fillText ("text ", 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

대신 Canvas를 사용하면 Highchart를 사용할 수 있습니다. Pie Diagramm with Highchart

출처

2017-10-05 13:05:04

와우 효과처럼 작동합니다. 감사합니다. HIghChart 플러그인 감사합니다. 감사합니다. – lkh

원형 차트 내부에 텍스트를 추가하는 방법은 무엇입니까?

답변

관련 문제