我的条形图相互重叠。需要帮助解决

My bar charts overlap eachother. Need help to solve it

我正在编写代码,我的屏幕上有一个输入字段和一个按钮。在下面的代码中,btnLeggTil(它的挪威语)添加了您在输入字段中写入的数字。它决定了条的高度。我的代码应该让用户添加 he/she 喜欢的任何高度的条形图。如您所见,我已将大量代码放入一个循环中。代码的问题在于它制作的条形相互重叠。我需要在每个栏之间有一个 space,但不知道如何。提前致谢!您可以自己测试代码并查看(只记得制作一个按钮和输入字段,名称为 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);
    }
}

您需要稍微修改一下 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();