플로 차트를 최소화하는 방법

Question

몇 가지 플로우 차트 (세로 차트와 파이 차트)를 만들었지 만 문제가 있습니다. 거의 모든 페이지를 차지하고 있기 때문에 차트를 최소화하고 싶습니다. 나는 값이 동일 할

<form action="listacumparaturi" method="get"> 
    <canvas width="2200" height="2200" id="myCanvas"></canvas> 

    <script> 
    var x = "${sumC}"; 
    var y = "${sumG}"; 
    var z = "${sumP}"; 
    var w = "${sumCa}"; 
    total = "${sumT}"; 
    var vertical = { 
    Calorii: x, 
    Grasimi: y, 
    Proteine: z, 
    Carbohidrati: w 
    }; 
    var data = Object.keys(vertical); 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    total = "${sumT}"; 
    color = ['orange', 'red', 'blue', 'green', 'black']; 
    start = 0; 
    for (var i = 0; i < data.length; i++) { 
    ctx.fillStyle = color[i]; 
    ctx.fillRect((i * 60) + 50, x, 10, -(vertical[data[i]])); 
    ctx.font = "13px Arial"; 
    ctx.fillText(data[i], (i * 60) + 51, x * 1.015); 
    ctx.fillText((1 * i), 20, ((32 * -i) + 920)); 
    ctx.beginPath(); 
    ctx.moveTo(600, 150); 
    ctx.arc(600, 150, 150, start, start + 
     (Math.PI * 2 * (vertical[data[i]]/total)), false); 
    ctx.lineTo(600, 150); 
    ctx.fillStyle = color[i]; 
    ctx.fill(); 
    start += Math.PI * 2 * (vertical[data[i]]/total); 
    } 
    </script> 
</form> 

사람이 내가이 플로우 차트를 최소화 할 수있는 방법을 알고 있나요하지만 사진을 최소화 할 : 여기

내가 한 일이다.

다음

당신이 미리 확인할 수 있습니다 http://codepen.io/nagasai/pen/Meayrb

감사합니다!

수직 막대의 높이를 계산하는 동안 난 그냥 코드 펜 URL ​​..Added 총 규모를 업데이트

Answer 1

- Y-axxis 바의 높이에 http://codepen.io/nagasai/pen/Meayrb

   ctx.fillRect((i * 60) + 50, 300, 10,(-(vertical[data[i]])*100)/total); 
       ctx.font = "9px Arial"; 
       ctx.fillText(data[i], (i * 60) + 51, 742); 
       ctx.fillText((700 * i), 30, (((70) * -i) + 300)); 

그리고 규모는 지금 동적이며 자동을 기준으로 조정하여 입력. 희망이 당신에게 유용합니다