Question

所有，这里所有的都是我的HTML代码，当我将其声明为单个数据时，它可以正常工作。但是当我将它声明为二维数组时。它不起作用。有什么问题。谁能帮我。这是带bug的代码

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.onload=function()
            {
                var canvas=document.getElementById('mycanvas');
                var ctx=canvas.getContext('2d');
                var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
                var width=50;
                var currx=30;

                var i = 0, j;
                for(j=0;j<=1;j++)
                {
                var interval = setInterval(function(){

                    if (i == value[j].length)
                    {
                        clearInterval(interval);
                        return;
                    }
                    var h=value[j][i];
                    ctx.fillStyle="grey";
                    ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
                    ctx.fillStyle="red";
                    ctx.fillRect(currx,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                }, 2000);
                }

            };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>

Answer 1

这里是更改的代码。测试它..

<script type="text/javascript">
    window.onload=function()
    {
        var canvas=document.getElementById('mycanvas');
        var ctx=canvas.getContext('2d');
        var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
        var width=50;
        var currx=30;
        var i = 0, j;
        for(j=0;j<=1;j++)
        {
        var interval = setInterval(function(){

            if (j == value[i].length)
            {
                clearInterval(interval);
                return;
            }

            var h = value[i][j];
            ctx.fillStyle="grey";
            ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
            ctx.fillStyle="red";
            ctx.fillRect(currx,canvas.height-h,width,h);                    
            currx+=60;  
            i++;
        }, 2000);
        }

    };
</script>

Answer 2

我不知道你在该代码中想要做什么。但问题是，for loop varible j和i不会像你想的那样表现。

尝试以下代码。它将正确执行，但可能不是您想要的结果。希望它会给出一个想法。

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.onload=function()
            {
                var canvas=document.getElementById('mycanvas');
                var ctx=canvas.getContext('2d');
                var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
                var width=50;
                var currx=30;

                var i = 0, j =0;
                //for(j=0;j<=1;j++)
                //{
                var interval = setInterval(function(){
if(j>1)
{
clearInterval(interval);
return;
}

                    var h=value[j][i];
                    ctx.fillStyle="grey";
                    ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
                    ctx.fillStyle="red";
                    ctx.fillRect(currx,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                }, 10);
                //}

            };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>

Answer 3

在您的代码中出现错误value[j] is undefined，因为j变量在3循环结束后评估为值for。但value数组的长度为2.使用下一个代码作为示例以避免此问题。

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');
            var graphInfo=[{data:[10,30,40,60,80,10],color:'red'},{data:[10,20,30,40,50,90],color:'grey'}];
            var width=45;

            function getFunctionForTimeout(j){
                var i=0,currx=30,info=graphInfo[j],x5=j*5;
                var fTimeout=function(){
                    var h=Math.max(info.data[i]-x5,0);
                    ctx.fillStyle=info.color;
                    ctx.fillRect(currx+x5,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                    if(i<info.data.length)setTimeout(fTimeout,2000);
                };
                return fTimeout;
            }

            for(var j=graphInfo.length-1;j>=0;j--) {
                setTimeout(getFunctionForTimeout(j),2000);
            }
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>

我的HTML代码中是否有任何错误。它没有按预期生成条形图

3 个答案: