Javascript For循环在中过早结束

[已编辑]包括方法的完整代码供您阅读

 function drawHPicto(form) {
        var rowNum = form.Row.value;
        var colNum = form.Column.value;

        //The data that is to be represented on the chart
        var data = [];
        var label = [];
        var chartTitle = form.subtitle.value;

        if (colNum == 2) {
            if (rowNum == 2) {
                data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
                data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
                label.push(form.title1.value);
                label.push(form.title2.value);
            }
            else if (rowNum == 3) {
                data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
                data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
                data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
            }
            else if (rowNum == 4) {
                data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
                data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
                data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
                data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
            }
            else if (rowNum == 5) {
                data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
                data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
                data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
                data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
                data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
                label.push(form.title5.value);
            }
            else if (rowNum == 6) {
                data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
                data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
                data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
                data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
                data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
                data.push([parseFloat(form.r6c1.value),parseFloat(form.r6c2.value)]);
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
                label.push(form.title5.value);
                label.push(form.title6.value);
            }
        }
        else {
            if (rowNum == 2) {
                data.push(parseFloat(form.r1c1.value));
                data.push(parseFloat(form.r2c1.value));
                label.push(form.title1.value);
                label.push(form.title2.value);
            }
            else if (rowNum == 3) {
                data.push(parseFloat(form.r1c1.value));
                data.push(parseFloat(form.r2c1.value));
                data.push(parseFloat(form.r3c1.value));
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
            }
            else if (rowNum == 4) {
                data.push(parseFloat(form.r1c1.value));
                data.push(parseFloat(form.r2c1.value));
                data.push(parseFloat(form.r3c1.value));
                data.push(parseFloat(form.r4c1.value));
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
            } 
            else if (rowNum == 5) {
                data.push(parseFloat(form.r1c1.value));
                data.push(parseFloat(form.r2c1.value));
                data.push(parseFloat(form.r3c1.value));
                data.push(parseFloat(form.r4c1.value));
                data.push(parseFloat(form.r5c1.value));
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
                label.push(form.title5.value);
            }
            else if (rowNum == 6) {
                data.push(parseFloat(form.r1c1.value));
                data.push(parseFloat(form.r2c1.value));
                data.push(parseFloat(form.r3c1.value));
                data.push(parseFloat(form.r4c1.value));
                data.push(parseFloat(form.r5c1.value));
                data.push(parseFloat(form.r6c1.value));
                label.push(form.title1.value);
                label.push(form.title2.value);
                label.push(form.title3.value);
                label.push(form.title4.value);
                label.push(form.title5.value);
                label.push(form.title6.value);
            }
        }
        var checkNum = $('input[name=showNumberPicto]:checked').val();
        var checkLabel = $('input[name=showLabelPicto]:checked').val();

        // clear graph
        RGraph.Clear(document.getElementById('cvs'));      
        RGraph.ObjectRegistry.Clear(document.getElementById('cvs'));

        var maxValue = Math.max.apply(Math, data);
        var minValue = Math.min.apply(Math, data);

        var maxLimit = Math.floor(maxValue/4);
        var minLimit = Math.floor(minValue/4);

        // set var for javascript to validate
        setCurrentMin = minLimit;
        setCurrentMax = maxLimit;

        form.intDiv.min = minLimit;
        form.intDiv.max = maxLimit;
        if(form.intDiv.value == 1){
            form.intDiv.value = Math.floor((maxLimit+minLimit)/2);
            if (form.intDiv.value == 0){form.intDiv.value=1;};
            var divider = form.intDiv.value;
        }else{
            // check input for validation within limit
            if (form.intDiv.value>setCurrentMax) {
                form.intDiv.value = setCurrentMax;
            }else if (form.intDiv.value < setCurrentMin) {
                form.intDiv.value = setCurrentMin;
            }
            if ((maxValue/form.intDiv.value) > 7){
                form.intDiv.value = setCurrentMax;
            }
            var divider = form.intDiv.value;
            //alert(divider);
        }

        //alert (maxValue);

        //var drawCanvas = document.getElementById('cvs');
        //var context = drawCanvas.getContext('2d');
        var c=document.getElementById("cvs");
        var ctx=c.getContext("2d");
        var img = new Image();
        img.src="assets/orange.png";
        img.onload = function(){
            for (var i=0;i<data.length;i++)
            {
                var drawRepeat = Math.floor((data[i]/divider));
                alert(data.length);
                var reminder = Math.round(((data[i]%divider)/divider)*10);
                var getDecimal = (10-reminder)/10;
                var posY = ((i*30)+10);
                var posX = ((drawRepeat*30)+30);
                //ctx.save();
                ctx.drawImage(img,posX,posY);
                ctx.fillStyle= "#FFF";
                ctx.fillRect(posX,posY,30,getDecimal*30);

                for (var j=0;j<drawRepeat;j++){
                    var yPos = ((i*30)+10);
                    var xPos = ((j*30)+30);
                    ctx.drawImage(img,xPos,yPos);
                }

                if (checkLabel == "1") {    
                    ctx.fillStyle= "#000";
                    ctx.fillText(label[i],15,((i*30)+15))
                }else{
                    ctx.fillText("")
                }

                if (checkNum == "1") {  
                    ctx.fillStyle= "#000";
                    ctx.fillText(data[i],260,((i*30)+15))
                }else{
                    ctx.fillText("")
                }
            }
        }
}

因此，当img.onload发生时，问题在于for循环

img.onload = function(){
                for (var i=0;i<data.length;i++)
                {
                    var drawRepeat = Math.floor((data[i]/divider));
                    alert(data.length);
                    var reminder = Math.round(((data[i]%divider)/divider)*10);
                    var getDecimal = (10-reminder)/10;
                    var posY = ((i*30)+10);
                    var posX = ((drawRepeat*30)+30);
                    //ctx.save();
                    ctx.drawImage(img,posX,posY);
                    ctx.fillStyle= "#FFF";
                    ctx.fillRect(posX,posY,30,getDecimal*30);

                    for (var j=0;j<drawRepeat;j++){
                        var yPos = ((i*30)+10);
                        var xPos = ((j*30)+30);
                        ctx.drawImage(img,xPos,yPos);
                    }

                    if (checkLabel == "1") {    
                        ctx.fillStyle= "#000";
                        ctx.fillText(label[i],15,((i*30)+15))
                    }else{
                        ctx.fillText("")
                    }

                    if (checkNum == "1") {  
                        ctx.fillStyle= "#000";
                        ctx.fillText(data[i],260,((i*30)+15))
                    }else{
                        ctx.fillText("")
                    }
                }
            }

我用同样的循环以垂直图形的方式绘制图像，效果很好。当我使用这个for循环来绘制水平图时，for循环结束于i=0。我跟踪data.length，它返回一个值3，因此for循环应该运行3个循环，但它在第一个循环时停止。有人能解决这个问题吗？我快发疯了

在代码中，您有：

> if (colNum == 2) {
>     if (rowNum == 2) {
>         data.push([parseFloat(form.r1c1.value),parseFloatform.r1c2.value)]);
>         data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
>         ---------------------------------------------------------^

可能名称为r2d2的表单控件不存在，并导致不正确的结果

if (checkLabel == "1") {    
                    ctx.fillStyle= "#000";
                    ctx.fillText(label[i],15,((i*30)+15))
                }else{
                    ctx.fillText("",15,((i*30)+15))
                }

---

设法找到问题所在，之前在else语句中我设置了ctx.fillText；如果没有x和y坐标，显然这就停止了循环

你可能想给我们更多的代码，因为有相当多的变量和函数我们没有看到声明，所以我们不能确定它们的任何副作用。可能数据变量在循环中的某个地方被更改了，我不熟悉canvas方法。也许您可以将data.length存储在一个变量中，并在循环中使用该变量作为引用。您能否提供更多信息。任何ctx方法是否会影响数据数组？数据数组是从多个表单输入中收集的，有点像表格，其中最多可以有6行输入。它们将存储在数据数组中。至于ctx方法是画布的绘制方法，它不会影响数据数组，它所做的只是为每个for循环绘制一个图像。一定不是他要找的机器人。lolx。有点故意这么做：P但是输入字段名是正确的。有一个名为r2d2的输入。