Bonsoir

Je développe un petit site web en local et j'ai un petit problème :

Dans une balise <canvas>, en avec JQuery, j'affiche un histogramme.

Je l'ai fait sans setTimeout et tout marche très bien

Afin d'ajouter un effet, je voudrais ajouter setTimeout mais là, plus rien ne s'affiche

voici mon code js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
  function drawCanvas() {    var bebe = $("#bebe").html();
    var enfant = $("#enfant").html();
    var adulte = $("#adulte").html();
    var agee = $("#agee").html();
 
 
    var bebeText = $("#bebe_image").attr("alt");
    var enfantText = $("#enfant_image").attr("alt");
    var adulteText = $("#adulte_image").attr("alt");
    var ageeText = $("#agee_image").attr("alt");
 
 
    var canvas = document.getElementById("canvas");
    var contex = canvas.getContext("2d");
    contex.textAlign="center";
    contex.font="15px Arial";
 
 
    var dataText = [bebe, enfant, adulte, agee];
 
 
    bebe = bebe.substring(0,bebe.length-1);
    enfant = enfant.substring(0,enfant.length-1);
    adulte = adulte.substring(0,adulte.length-1);
    agee = agee.substring(0,agee.length-1);
 
 
    var dataNumber = [bebe, enfant, adulte, agee];
    var barColor = ['#efac55', '#45b0ca', '#92be6c', '#45b0ca']
    var absText = [bebeText, enfantText, adulteText, ageeText];
 
 
    var barWidth=40;
    var barSpace=100;
    var barUnit=5;
 
 
    var posX = 0;
    var posY = 0;
 
 
    for (var i = 0; i<dataNumber.length; i++){
 
 
      setTimeout(function() {
        barHeight = dataNumber[i] * barUnit;
        posX = i*barSpace + 60 + i*barWidth;
        posY = 400 - barHeight;
        contex.fillStyle = barColor[i];
        contex.fillRect(posX, posY - 30, barWidth, barHeight);
        contex.fillText(dataText[i], posX + 20, posY -40);
        contex.fillStyle = 'black';
        contex.fillText(absText[i], posX +20, 390);
      }, 1000);
 
 
    }
 
 
  }
Si je supprime les lignes 45 et 54, sa marche mais sans l'effet "kiss cool"

Les données sont récupérée dans des balises HTML (prévu de mettre dans un tableau)

Merci d'avance pour votre aide.