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 ループを使用して水平グラフを描画すると、i=0 で for ループが終了しました。値 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 に答える