11521 sujets

JavaScript, DOM et API Web HTML5

Histogramme en barre a l'aide de javascript

Bonjours, je viens à vous car j'ai un problème pour l'un de mes TP, je dois faire apparaître un histogramme en barre en fonction de valeurs entrée par l'utilisateur.

Le tp est disponible ici :
- https://image.noelshack.com/fichiers/2017/13/1490812666-fibo2.jpg
- https://image.noelshack.com/fichiers/2017/13/1490812564-fibo.jpg

Où j'en suis dans mon code ? 
<!doctype html>
<html lang="fr">
    <head>
          <meta charset="utf-8">
          <title>Suite de Fibonacci</title>
    </head>
    
    <script type="text/javascript">        
        function invalide()
        {
            var premierterme = document.getElementById("u0").value;
            var secondterme = document.getElementById("u1").value;
            var intervalle = document.getElementById("n").value;
            
            if(isNaN(premierterme) || isNaN(secondterme) || isNaN(intervalle) || intervalle>20 || intervalle<0)
            {
                alert("données invalides");
            }
        }
        
        var tab =[0,1];
        
        function calculer()
        {   
            var Nieme = document.getElementById("n").value;

            for (n=2; n<=Nieme; n++)
            {
                tab[n] = tab[n-1] + tab[n-2];
                document.getElementById('resultats').value += tab[n] + " ";
            }

            document.getElementById('afficheUn').value=tab[Nieme];

            var somme = 0;
            for (n=2; n<=Nieme; n++)
            {
                tab[n] = tab[n-1] + tab[n-2];
                somme += tab[n]
            }           
            document.getElementById('afficheSn').value=somme;
        }
        
        var histo = document.getElementById('histogramme');
        function dessin()
        {
            for(n=0; n<=Nieme; n++)
            {
                var colonne = document.createElement("td");
                histogramme.appendChild(colonne);
                
                var soustable = document.createElement("table");
                colonne.appendChild(soustable);
                
                for(i=0; i<3; i++)
                {
                    var souscolonne = document.createElement("td")
                    soustable.appendChild(souscolonne);
                }
            }
        }
    </script>
    
    <body>
        <h1>Suite de Fibonacci</h1>
        
        <h2>1- Données</h2>
            <tr>
                <td> u<sub>0</sub> = </td> 
                <td><input type="text" id="u0" name="u0" value="0"></td>
            </tr><br />
            <tr>
                <td>u<sub>1</sub> = </td> 
                <td><input type="text" id="u1" name="u1" value="1"></td>
            </tr><br />
            <tr style="margin-bottom:5px;">
                <td> &#8239; n  =</td>
                <td><input type="text" id="n" name="n" value="10"> (dans l'intervalle [0,20])</td>
            </tr><br />
            <tr>
            <button style="width:350px;" type="button" onclick="invalide();calculer();dessin();">Calculer</button>
            </tr>
        
        <h2>2- Résultats</h2>
            u<sub>n</sub> = <input type="text" id="afficheUn" disabled="disabled" name="un"><br />
            s<sub>n</sub> = <input type="text" id="afficheSn" disabled="disabled" name="sn"><br />
            Fenêtre des valeurs de la suite de Fibonacci<br />
            <textarea id="resultats" disabled="disabled" cols="50" rows="5"></textarea>
        
        <h2>3- Histogramme</h2>
            <div id="ici">
                <table>
                    <tr id="histogramme"> //une ligne mais on doit faire apparaître n+1 colonnes 
                        
                    </tr>
                </table>
            </div>
        </body>
</html>


Le problème est que je n'arrive pas a générer correctement la fonction dessiner() et je ne comprend pas tellement leur sujet .. Smiley confus
Okay, donc j'ai bossé dessus, ma fonction ressemble à ça maintenant : 

function dessin()
        {
            var Nieme = document.getElementById("n").value;
            var div = document.getElementById('ici');
            
            // on fait un tableau de une ligne
            var tableau = document.createElement("table");
            div.appendChild(tableau);
            var ligne = document.createElement("tr");
            tableau.appendChild(ligne);
            
            //On ajoute n+1 colonnes a ce tableau
            for(n=1; n<=Nieme-1;n++)
            {
                var colonne = document.createElement("td");
                ligne.appendChild(colonne);
                colonne.innerHTML=tab[n+1];
            }
            
            //On ajoute une table a chaque colonne
            for(n=0; n<=Nieme+1; n++)
            {
                var soustable = document.createElement("table");
                colonne.appendChild(soustable);
            } 
            
            //On ajoute trois lignes et une colonne a chaque table
            for(n=0; n<=Nieme+1; n++)
            {
                for(i=0;i<3;i++)
                {
                    var sousligne = document.createElement("tr"); 
                    colonne.appendChild(sousligne);
                }
                var souscolonne = document.createElement("td");
                sousligne.appendChild(souscolonne);
            }


Le problème est que j'ai bien un tableau a une ligne et n colonne mais le sous tableau n'est que dans la dernière colonne et non dans toutes les colonnes. Le rendu visuel est comme ceci https://image.noelshack.com/fichiers/2017/13/1490867770-capture.png
Une solution :


<!doctype html>
<html lang="fr">
    <head>
          <meta charset="utf-8">
          <title>Suite de Fibonacci</title>
          
    </head>
    
    <script type="text/javascript">        
        function invalide()
        {
            var premierterme = document.getElementById("u0").value;
            var secondterme = document.getElementById("u1").value;
            var intervalle = document.getElementById("n").value;
            
            if(isNaN(premierterme) || isNaN(secondterme) || isNaN(intervalle) || intervalle>20 || intervalle<0)
            {
                alert("données invalides");
            }
        }
        
        var tab =[0,1];
        
        function calculer()
        {   
            var Nieme = document.getElementById("n").value;

            for (n=2; n<=Nieme; n++)
            {
                tab[n] = tab[n-1] + tab[n-2];
                document.getElementById('resultats').value += tab[n] + " ";
            }

            document.getElementById('afficheUn').value=tab[Nieme];

            var somme = 0;
            for (n=2; n<=Nieme; n++)
            {
                tab[n] = tab[n-1] + tab[n-2];
                somme += tab[n]
            }           
            document.getElementById('afficheSn').value=somme;
        }
        
        var histo = document.getElementById('histogramme');
        function dessin()
        {
            var Nieme = document.getElementById("n").value;
            for(n=0; n<=Nieme; n++)
            {
                var colonne = document.createElement("td");
                histogramme.appendChild(colonne);
                
                var soustable = document.createElement("table");
                colonne.appendChild(soustable);
                soustable.style.height = tab[Nieme]+"px";
                
                //ligne 1
                var souscolonne3 = document.createElement("td");
                souscolonne3.textContent=tab[n].toString();
                souscolonne3.style.height=(tab[Nieme]-tab[n]+20)+"px";
                souscolonne3.style.verticalAlign="bottom";
                var sousligne3 = document.createElement("tr");

                sousligne3.appendChild(souscolonne3);
                soustable.appendChild(sousligne3);
                
                //ligne 2
                var souscolonne2 = document.createElement("td");
                souscolonne2.style.backgroundColor ="aquamarine";
                souscolonne2.style.height=tab[n]+"px";
                var sousligne2 = document.createElement("tr");

                sousligne2.appendChild(souscolonne2);
                soustable.appendChild(sousligne2);
                    
                //ligne 3
                var souscolonne1 = document.createElement("td");
                souscolonne1.textContent="U"+n.toString();
                var sousligne1 = document.createElement("tr");

                sousligne1.appendChild(souscolonne1);
                soustable.appendChild(sousligne1);
            }
        }
    </script>
    
    <body>
        <h1>Suite de Fibonacci</h1>
        
        <h2>1- Données</h2>
            <tr>
                <td> u<sub>0</sub> = </td> 
                <td><input type="text" id="u0" name="u0" value="0"></td>
            </tr><br />
            <tr>
                <td>u<sub>1</sub> = </td> 
                <td><input type="text" id="u1" name="u1" value="1"></td>
            </tr><br />
            <tr style="margin-bottom:5px;">
                <td> &#8239; n  =</td>
                <td><input type="text" id="n" name="n" value="10"> (dans l'intervalle [0,20])</td>
            </tr><br />
            <tr>
            <button style="width:350px;" type="button" onclick="invalide();calculer();dessin();">Calculer</button>
            </tr>
        
        <h2>2- Résultats</h2>
            u<sub>n</sub> = <input type="text" id="afficheUn" disabled="disabled" name="un"><br />
            s<sub>n</sub> = <input type="text" id="afficheSn" disabled="disabled" name="sn"><br />
            Fenêtre des valeurs de la suite de Fibonacci<br />
            <textarea id="resultats" disabled="disabled" cols="50" rows="5"></textarea>
        
        <h2>3- Histogramme</h2>
            <div id="ici">
                <table>
                    <tr id="histogramme"> //une ligne mais on doit faire apparaître n+1 colonnes 
                        
                    </tr>
                </table>
            </div>
        </body>
</html>


J'espère que vous avez cherché un peu..

Illustration: http://gjboba.esy.es/tphistogramme.html

Bonne continuation
Sujet clos
Aller à