如何最小化流程圖

我已經設法制作了一些流程圖（垂直圖表和餅圖），但我遇到了一個問題，我想盡量減少圖表，因爲它們幾乎佔據了我的整個頁面。如何最小化流程圖

這裏是我做了什麼：

<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

謝謝！

來源

2016-06-08 Bogdan

我剛剛更新的規模在代碼筆URL ..Added總在計算豎條高度 - 在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));

和規模現在是動態的，自動調節根據您的投入。希望這對你有所幫助

來源

2016-06-08 17:24:44

是有幫助的，另外一個問題，我看到的是左邊的數字的比例與垂直圖表不對應。例如：1080和藍線高於1080 – Bogdan

不，我認爲這是調整的價值..爲測試我改變了第一個值爲1400.Please找到codepen網址 - http://codepen.io/nagasai/pen/Meayrb –

是的，我看到了，我的不好的，:(另一件我想要顯示的只是1400的值，我不希望上面的其他值（2100等），請你看看嗎？ – Bogdan

如何最小化流程圖

回答

相關問題