Mon diagramme SVG, créé en JS ne s'affiche pas correctement.

Résolu

JC_8280 Messages postés 78 Date d'inscription Statut Membre Dernière intervention -
JC_8280 Messages postés 78 Date d'inscription Statut Membre Dernière intervention - 7 févr. 2021 à 15:29

Bonjour,
Je souhaite crée un graphique svg dans mon html, en utilisant le JavaScript.
Dans l'inspecteur je retrouve tous les éléménts, qui semblent avoir les bons attributs, seulement à l'affichage je ne voit rien car la dimension horizontale est de "zéro".

Comment afficher correctement mon graphique?

Mon code JS HTML et CSS ci dessous.


// CREER UNE LIGNE DE CONTROLE
//compteur de ligne
let n_ligne=0;
let fac = document.getElementById('id_fac');
document.getElementById('coteLin').addEventListener('click',f_cotelineaire);


function drawLine(str_name,id_graphe,clName,graphe,x1,y1,x2,y2){
  let name = document.createElement("line");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.setAttribute("x2",x2);
  name.setAttribute("y2",y2);
  graphe.appendChild(name);
}

function ecriture(str_name,id_graphe,clName,graphe,x1,y1,val){
  let name = document.createElement("text");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.innerHTML=val;
  graphe.appendChild(name);
}

function f_cotelineaire(){
    n_ligne+=1;
  
  //ligne de controle
    let lgn_controle = document.createElement("div");
    lgn_controle.setAttribute("id",'idControle_'+ n_ligne);
    lgn_controle.setAttribute("class","classControle");
    let lgn_data = document.createElement("div");
    lgn_data.setAttribute("id",'idData_'+ n_ligne);
    lgn_data.setAttribute("class","classData");    
    let lgn_graphe = document.createElement("div");   
    lgn_graphe.setAttribute("id",'idGraphe_'+ n_ligne);
    lgn_graphe.setAttribute("class","classGraphe");
    lgn_controle.appendChild(lgn_data);
    lgn_controle.appendChild(lgn_graphe);    
    fac.appendChild(lgn_controle);
  //Numéro de cote
    let numCote=document.createElement("p");
    numCote.innerHTML=n_ligne;
    numCote.setAttribute("class","classNumCote");
    lgn_data.appendChild(numCote);
  // Valeur nominal  
    let valNominale=document.createElement("p");
    let valNom = 20; //prompt("Entre la valeur nominale");
    valNominale.innerHTML=valNom;
    valNominale.setAttribute("class","classNominale");
    lgn_data.appendChild(valNominale);
  // Tolérance inferieure  
    let toleranceInf = document.createElement("p");
    let tolInf = -1 ;//prompt("Entre la tolérance inférieure");
    toleranceInf.innerHTML=tolInf;
    toleranceInf.setAttribute("class","classTol_inf");
    lgn_data.appendChild(toleranceInf);
  // Tolérance inferieure  
    let toleranceSup = document.createElement("p");
    let tolSup = "+1" ; //prompt("Entre la tolérance supérieure");
    toleranceSup.innerHTML=tolSup;
    toleranceSup.setAttribute("class","classTol_sup");
    lgn_data.appendChild(toleranceSup);
  // Fréquence de controle  
    let frequence = document.createElement("p");
    let fz = "1/15" ; //prompt("Entre la fréquence de controle");
    frequence.innerHTML=fz;
    frequence.setAttribute("class","classFrequence");
    lgn_data.appendChild(frequence);
  //  Outil de controle 
    let instrument = document.createElement("p");
    let instrumentControle = "Pied à coulisse"; //prompt("Instrument de controle");
    instrument.innerHTML = instrumentControle;
    instrument.setAttribute("class","classInstrument");
    lgn_data.appendChild(instrument);
  // Commentaire
    let comment = document.createElement("p");
    let commentaire = "Rien à signaler"; //prompt("Entrer un commentaire sur la cote à controler");
    comment.innerHTML = commentaire;
    comment.setAttribute("class","classCommentaire");
    lgn_data.appendChild(comment);
  // Avant dernière valeur
    let av_derniere_valeur = document.createElement('p');
    av_derniere_valeur.setAttribute("class","classAvDer"); 
    lgn_data.appendChild(av_derniere_valeur);
  // Avant dernière valeur
    let derniere_valeur = document.createElement('p');
    derniere_valeur.setAttribute("class","classDer"); 
    lgn_data.appendChild(derniere_valeur);    
  
  // ******************
  // ***** Graphe *****
  // ******************
    let id_graphe = 'id_graphe'+ n_ligne;
    let graphe = document.createElement("svg");
    graphe.setAttribute('id',id_graphe);
    graphe.setAttribute("class","classGraphe");
    graphe.setAttribute("width","600");
    graphe.setAttribute("height","75");
    graphe.setAttribute("viewBox","0 0 600 50");
    // graphe.setAttribute("xmlns","http://www.w3.org/2000/svg")
  //Rectangle de fond
    let rect1 = document.createElement("rect");
    rect1.setAttribute("id",id_graphe+"rect1");
    rect1.setAttribute("class","classRect1");
    rect1.setAttribute("width","330");
    rect1.setAttribute("height","50");
    graphe.appendChild(rect1);
  //ligne des X
    drawLine('axeX',id_graphe,"axe",graphe,0,25,330,25);
  //ligne des Y
    drawLine('axeY',id_graphe,"axe",graphe,20,0,20,50);
  
/*

    //ligne tolerance supérieur
    drawLine('tolSup',id_graphe,"tolerance",graphe,20,5,330,5);
  //ligne de tolerance inferieure
    drawLine('tolInf',id_graphe,"tolerance",graphe,20,45,330,45);
  //ligne seuil capabilité supérieure
    drawLine('capaSup',id_graphe,"capa",graphe,20,11,330,11);
  //ligne seuil capabilité inférieure
    drawLine('capaInf',id_graphe,"capa",graphe,20,39,330,39);
  // marqueur abcisse 5
    drawLine('mark5',id_graphe,"mark5",graphe,70,0,70,50);
  // marqueur abcisse 10
    drawLine('mark10',id_graphe,"mark10",graphe,120,0,120,50);
  // marqueur abcisse 15
    drawLine('mark15',id_graphe,"mark5",graphe,170,0,170,50);
  // marqueur abcisse 20
    drawLine('mark20',id_graphe,"mark10",graphe,220,0,220,50);
  // marqueur abcisse 25
    drawLine('mark25',id_graphe,"mark5",graphe,270,0,270,50);
  // marqueur abcisse 30
    drawLine('mark30',id_graphe,"mark10",graphe,320,0,320,50);
  // texte valeur nominale
    ecriture('valNominale',id_graphe,"axe",graphe,2,24,20);
  // texte valeur tolerance superieure
    ecriture('valTolSup',id_graphe,"tolerance",graphe,2,7.0,20.20);
  // texte valeur tolerance inferieure
    ecriture('valTolInf',id_graphe,"tolerance",graphe,2,47.0,19.80);
  // texte valeur capabilite superieure
    ecriture('valCapaSup',id_graphe,"capa",graphe,2,13,20.13);
  // texte valeur capabilité inférieure
    ecriture('valCapaInf',id_graphe,"capa",graphe,2,41.0,19.87);    
  // texte marqueur X 0
    ecriture('mark0',id_graphe,"mark10",graphe,70,49,0);
  // texte marqueur X 5
    ecriture('mark5',id_graphe,"mark5",graphe,70,49,5);
  // texte marqueur X 10
    ecriture('mark10',id_graphe,"mark10",graphe,120,49,10);
  // texte marqueur X 15
    ecriture('mark15',id_graphe,"mark5",graphe,170,49,15);
  // texte marqueur X 20
    ecriture('mark20',id_graphe,"mark10",graphe,220,49,20);
  // texte marqueur X 25
    ecriture('mark25',id_graphe,"mark5",graphe,270,49,25);
  // texte marqueur X 30
    ecriture('mark30',id_graphe,"mark10",graphe,320,49,30);
  // data path de la courbe
   let courbe = document.createElement("path");
   let data ="M30 20.5 L40 18 L50 20 L60 25 L70 17.5 L80 21 L90 18.5 L100 15 L110 8 L120 38 L130 19 L140 30 L150 8 L160 8 L170 38 L180 19 L190 30 L200 8";
   courbe.setAttribute("id",id_graphe+courbe);
   courbe.setAttribute("class","class"+courbe);
   courbe.setAttribute("d",data);
   graphe.appendChild(courbe);

*/

   lgn_graphe.appendChild(graphe);

    //alert ('n_ligne = ' + n_ligne);
}

var graphe1 = document.getElementById("id_graphe1");

CSS:

#id_fac {
    width: 297mm;
    height: 210mm;
    border: 1px;
    border-color: black;
    border: solid;
}

svg {
   /* border:1px, solid, black;*/
    width: 650px;
    height: 75px;
    background-color: rgb(180, 180, 210);
}

#coteLin{
    width: 130px;
    height: 60px;
}
#coteGeo{
    width: 130px;
    height: 60px;
}

.classData{grid-area: data;}
.classGraphe{grid-area: graphe;}

.classNumCote{grid-area: numCote;}
.classNominale {grid-area: nominal;}
.classTol_sup{grid-area: tol_sup;}
.classTol_inf{grid-area: tol_inf;}
.classFrequence{grid-area: frequence;}
.classInstrument{grid-area: instrument;}
.classAvDer{grid-area: avDer;}
.classDer{grid-area: der;}
.classCommentaire{grid-area: commentaire;}

.classData{
    display: grid;
    grid-template-areas:
        'numCote nominal tol_sup frequence avDer der'
        'numCote nominal tol_inf instrument avDer der'
        'commentaire commentaire commentaire commentaire commentaire commentaire' ;
    grid-gap:2px;
    background-color: rgb(245, 124, 124);
    border: 3px double rgb(252, 9, 1);
    font-size: 12px;
    padding: 1px;
    margin: 1px;
}

.classData > p {
    background-color: rgba(241, 240, 245, 0.705);
    text-align: center;
    padding: 1px 0;
    margin: 1px;
    width: auto;
}
.classGraphe{
    border: 1px solid black;
}

.classControle{
    display: grid;
    grid-template-areas: 'data graphe';
}

.axe{
    stroke-width: 1px;
    stroke: black;
}

.tolerance{
    stroke-width: 0.4;
    stroke: red;

}

.capa{
    stroke: rgb(40, 240, 40);
    stroke-width: 0.4;
}

.mark5{
    stroke: black;
    stroke-width: 0.35;
    stroke-dasharray: 3,3;
    font-size: 5px;
}

.mark10{
    stroke: black;
    stroke-width: 0.35;
    font-size: 5px;
}

.classcourbe{
    stroke: blue;
    stroke-width: 1;
    fill: transparent;
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> CREATION FAC</title>
        <link rel="stylesheet" href="191_STYLE.css"/>        
    </head>
  
    <body>
        <h1>CREATION D'UNE FICHE DE CONTROLE</h1>  
        <button id="coteLin">AJOUTER 1 COTE LINEAIRE</button>
        <button id="coteGeo">AJOUTER 1 COTE GEOMETRIQUE</button>
        <br>
        <div id="id_fac" class="class_fac">
            <p>FICHE AUTO CONTROLE</p>
        </div>
        <script id="script_JS1" src = "191_creaFAC.js"></script>
        <script id="script_JS2" src="191_graphe.js"></script>
    </body>
</html>

Configuration: Windows / Firefox 85.0

A voir également:

Mon diagramme SVG, créé en JS ne s'affiche pas correctement.
Votre appareil ne dispose pas des correctifs de qualité et de sécurité importants - Guide
Svg viewer - Télécharger - Divers Web & Internet
Cree un compte google - Guide
Le clavier de mon telephone ne s'affiche plus - Guide
Cree gmail - Guide

1 réponse

Réponse 1 / 1

JC_8280 Messages postés 78 Date d'inscription Statut Membre Dernière intervention

Bonjour, voici la réponse à ma question:
Pour créer des éléménts SVG en javasript, il faut utliser le code createElementNS comme ci-dessous.


let ns='http://www.w3.org/2000/svg';

function drawLine(str_name,id_graphe,clName,graphe,x1,y1,x2,y2){
  let name = document.createElementNS(ns,"line");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.setAttribute("x2",x2);
  name.setAttribute("y2",y2);
  graphe.appendChild(name);
}

function ecriture(str_name,id_graphe,clName,graphe,x1,y1,val){
  let name = document.createElementNS(ns,"text");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x",x1);
  name.setAttribute("y",y1);
  name.innerHTML=val;
  graphe.appendChild(name);
}

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Facebook n' affiche pas mon anniversaire

Votre réponse

Discussions similaires