我的條形圖互相重疊。需要幫助來解決它

Question

即時消息我做了一個代碼，我有一個輸入欄和一個按鈕在我的屏幕上。在下面的代碼中，btnLeggTil（它的挪威語）會添加您在輸入字段中編寫的數字。它決定了酒吧的高度。我的代碼應該讓用戶添加任何他/她喜歡的高度的酒吧。正如你所看到的，我已經把很多我的代碼放在一個循環中。代碼的問題在於它所製作的條形，相互重疊。我需要在每個酒吧之間留出空間，但不知道如何。提前致謝！您可以自己測試代碼並查看（只記得製作一個名稱爲btnLeggTil和txtInn的按鈕和輸入字段）

（「høyde」表示寬度）（「bredde」表示寬度）（「更精細」意味着值）對不起它的挪威

var verdier:Array = new Array(); 

btnLeggTil.addEventListener(MouseEvent.CLICK, leggtil); 
function leggtil (evt:MouseEvent) 
{ 
    verdier.push(txtInn.text); 
    var totHøyde:int = 200; //total height on diagram 
    var totBredde:int = 450; //total width on diagram 
    var antall:int = verdier.length; 

    var xv:int = 50; 
    var yb:int = 350; 
    var bredde:int = (totBredde/antall) * 0.8; 
    var mellom:int = (totBredde/antall) * 0.2; 
    var maksHøyde:int = maksVerdi(verdier); 

    function maksVerdi(arr:Array):Number //finds the biggest value in the array 
    { 
     //copies to not destroy the order in the original 
     var arrKopi:Array = arr.slice(); 

     arrKopi.sort(Array.NUMERIC|Array.DESCENDING); 
     return arrKopi[0]; 
    } 

    for(var i:int = 0; i < verdier.length; i++) 
    { 
     graphics.lineStyle(2, 0x000000); 
     graphics.beginFill(0x00ff00); 
     graphics.drawRect(xv + (bredde+mellom)*i, yb, bredde, -verdier[i] * (totHøyde/maksHøyde)); 
     graphics.endFill(); 

     var txtTall = new TextField(); 
     txtTall.x = xv + (bredde+mellom)*i + 5; 
     txtTall.y = yb - verdier[i] - 10; 
     txtTall.type = "dynamic"; 
     txtTall.text = verdier[i]; 
     addChild(txtTall); 
    } 
} 

Answer 1

你需要修改你的for循環了一下，

graphics.clear(); 
graphics.lineStyle(2, 0x000000); 
graphics.beginFill(0x00ff00); 
for(var i:int = 0; i < verdier.length; i++) 
{ 

    graphics.drawRect(xv + (bredde+mellom)*i, yb, bredde, -verdier[i] * (totHøyde/maksHøyde)); 


    var txtTall = new TextField(); 
    txtTall.x = xv + (bredde+mellom)*i + 5; 
    txtTall.y = yb - verdier[i] - 10; 
    txtTall.type = "dynamic"; 
    txtTall.text = verdier[i]; 
    addChild(txtTall); 
} 
graphics.endFill();