Javascript 我的html代码中是否有任何错误。它没有像预期的那样生成条形图
这里是我的html代码，当我将它声明为单个数据时，它可以正常工作。但当我把它声明为二维数组时。它不起作用。有什么问题吗。有人能帮我吗。下面是带有bug的代码Javascript 我的html代码中是否有任何错误。它没有像预期的那样生成条形图,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,这里是我的html代码，当我将它声明为单个数据时，它可以正常工作。但当我把它声明为二维数组时。它不起作用。有什么问题吗。有人能帮我吗。下面是带有bug的代码 <!doctype html> <html> <head> <script type="text/javascript"> window.onload=function() { var ca
<!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>
window.onload=function（）
{
var canvas=document.getElementById（'mycanvas'）；
var ctx=canvas.getContext（'2d'）；
var值=[[10,30,40,60,80]，[10,20,30,40,50,90]；
var宽度=50；
var currx=30；
var i=0，j；
代码中的for（j=0；j错误value[j]未定义
，因为j
变量在for
循环结束后求值为value3
。但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>
window.onload=function（）{
var canvas=document.getElementById（'mycanvas'）；
var ctx=canvas.getContext（'2d'）；
var graphInfo=[{数据：[10,30,40,60,80,10]，颜色：'red'}，{数据：[10,20,30,40,50,90]，颜色：'grey'}]；
var宽度=45；
函数getFunctionForTimeout（j）{
变量i=0，currx=30，info=graphInfo[j]，x5=j*5；
var fTimeout=函数（）{
var h=数学最大值（信息数据[i]-x5,0）；
ctx.fillStyle=info.color；
ctx.fillRect（currx+x5，画布。高度-h，宽度，h）；
currx+=60；
i++；
如果（i=0；j--）{
setTimeout（getFunctionForTimeout（j），2000）；
}
};
这里是更改的代码。请测试它
<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>
window.onload=function（）
{
var canvas=document.getElementById（'mycanvas'）；
var ctx=canvas.getContext（'2d'）；
var值=[[10,30,40,60,80]，[10,20,30,40,50,90]；
var宽度=50；
var currx=30；
var i=0，j；
因为（j=0；j查看区间函数中j
的值，它不是您认为的值（它将是2）。您没有用这个问题明确说明您的意图……您是否打算做类似的事情