我的条形图相互重叠.需要帮助来解决它

Question

im 制作一个代码，我的屏幕上有一个输入字段和一个按钮。在下面的代码中，btnLeggTil（挪威语）添加了您在输入字段中输入的数字。它决定了条形的高度。我的代码应该让用户添加他/她喜欢的任何高度的条形图。如您所见，我已经将很多代码放在一个循环中。代码的问题在于它制作的条形相互重叠。我需要在每个条形之间留一个空格，但不知道如何。提前感谢！您可以自己测试代码并查看（只需记住制作一个按钮和输入字段，名称为btnLeggTil和txtInn。

（"høyde"的意思是高度） （"bredde"表示宽度） （"verdier"表示值） 对不起，它都是挪威语

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();