Javascript 画布中的动画条

所以，我试图创建一个动画图表，其中一个条是从下到上的动画。问题是当我运行它时，只显示一个没有动画的条。 有人能帮忙吗

守则：

let canvas = document.getElementById('chart');
let ctx = canvas.getContext('2d');

let values = config().data;
let width = config().width;
let spaceBetweenBars = config().spaceBetweenBars;
let startingX = 50;

canvas.height = 300;
canvas.width = 400;
ctx.fillStyle = config().color;

for (let i = 0; i < values.length; i++) {
    let height = values[i];
    let l = 0;
    while(l < height){
        setTimeout(()=>{
            ctx.fillRect(startingX, canvas.height - height, width, l)                
        },1000)
        l++;
    }
    startingX += width + spaceBetweenBars;
} 

let canvas=document.getElementById（'chart'）；
设ctx=canvas.getContext（'2d'）；
让value=config（）.data；
让width=config（）.width；
让spaceBetweenBars=config（）.spaceBetweenBars；
设startingX=50；
帆布高度=300；
画布宽度=400；
ctx.fillStyle=config（）.color；
for（设i=0；i{
ctx.fillRect（起始x，canvas.height-高度，宽度，l）
},1000)
l++；
}
startingX+=宽度+横杆之间的间距；
} 
既然你没有给我
config（）的结果
我发明了一个
config
对象

我试着按照你想的方式做。我会以不同的方式组织数据

为了给这些条设置动画，我使用了
requestAnimationFrame
，因为它效率更高。如果愿意，您可以使用
setInterval（）

请阅读我代码中的注释


let canvas=document.getElementById（'chart'）；
设ctx=canvas.getContext（'2d'）；
帆布高度=150；
画布宽度=400；
让config={width:30，height:0，spaceBetweenBars:5，color:“green”}；
设值=[35,48,98,34,55]；
//复制值数组并用0填充。
//这是动画期间条形高度的值
让currentValues=values.slice（）.fill（0）；//[0,0,0,0,0]
设startingX=50；
功能牵引杆（高度，i）{
设x=startingX；
x+=i*（config.width+config.spacebetweenbar）；
ctx.fillStyle=config.color；
ctx.beginPath（）；
fillRect（x，canvas.height，config.width，-height）；
}
//我使用requestAnimationFrame，因为它效率更高。
函数绘图图（）{
window.requestAnimationFrame（绘图图）；
for（设i=0；i

canvas{border:1px solid；}
既然你没有给我
config（）
的结果，我就发明了一个
config
对象

我试着按照你想的方式做。我会以不同的方式组织数据

为了给这些条设置动画，我使用了
requestAnimationFrame
，因为它效率更高。如果愿意，您可以使用
setInterval（）

请阅读我代码中的注释


let canvas=document.getElementById（'chart'）；
设ctx=canvas.getContext（'2d'）；
帆布高度=150；
画布宽度=400；
让config={width:30，height:0，spaceBetweenBars:5，color:“green”}；
设值=[35,48,98,34,55]；
//复制值数组并用0填充。
//这是动画期间条形高度的值
让currentValues=values.slice（）.fill（0）；//[0,0,0,0,0]
设startingX=50；
功能牵引杆（高度，i）{
设x=startingX；
x+=i*（config.width+config.spacebetweenbar）；
ctx.fillStyle=config.color；
ctx.beginPath（）；
fillRect（x，canvas.height，config.width，-height）；
}
//我使用requestAnimationFrame，因为它效率更高。
函数绘图图（）{
window.requestAnimationFrame（绘图图）；
for（设i=0；i

canvas{border:1px solid；}
setInterval（）代替setTimeout将只执行一次函数。setInterval（）代替setTimeout将只执行一次函数。