0

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

 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 处结束。我追踪返回值 3 的 data.length，因此 for 循环应该运行 3 个循环，但它在第一个循环处停止。有人对此有解决方案吗？我要疯了。

4

2 回答 2

0 
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 坐标，显然停止了循环。

于 2012-06-08T07:17:58.987 回答
0

在您的代码中，您有：

> 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可能不存在具有名称的表单控件并导致不正确的结果。

于 2012-06-08T04:50:15.623 回答