Bonjour à tous,
Je débute en JS, je voudrais faire une page html qui permet de tracer des courbes mathématiques.
Jusque là pas de problème on trouve plein de chose.
Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.
Exemple : Si l'utilisateur clique une première fois sur le bouton, alors il peut tracer une deuxième fonction. Si l'utilisateur clique une deuxième fois sur le bouton, alors l'utilisateur peut tracer une troisième fonction... etc.
Je pense qu'il faut implémenter ma fonction plot mais je ne sais pas comment faire.
Pouvez vous m'aider?
Merci
Mon HTML
Code html : 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
61
62
63
64
65 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>7_interactive_plotter</title> <link rel="stylesheet" href="7_interactive_plotter.css"> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script> <script src="7_interactive_plotter.js"></script> </head> <body onload="plot();"> <h1>Traceur interactif</h1> <div class="layer"> <section id="plotSettings"> <p> <b> Configuration des axes </b> </p> <p></p> <label for="xMin"> Valeur Mini de X: </label> <input type=number id="xMin" value=-5 step=0.5 oninput="plot();"> <p></p> <label for="xMax">Valeur Maxi de X: </label> <input type=number id="xMax" value=5 step=0.5 oninput="plot();"> <p></p> <label for="yMin">Valeur Mini de Y: </label> <input type=number id="yMin" value=-5 step=0.5 oninput="plot();"> <p></p> <label for="yMax">Valeur Maxi de Y: </label> <input type=number id="yMax" value=5 step=0.5 oninput="plot();"> <p></p> <label for="color">Couleur de la fonction à dessiner: </label> <input type=color id="color" value=#bb0b0b onchange="plot();"> <p></p> <label for="function">Fonction à dessiner: </label> <input id="function" type="text" value="sin(x)" onchange="plot();"> <p></p> <button onclick="plot();">Dessiner</button> </section> <section id="plot"> <div id="myFunction"></div> </section> </div> <footer> <a href="7_support.html">Retour au rapport du workspace 7</a> </footer> </body> </html>
Mon JS
et le CSS
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 // fonction à tracer var parameters = { target: '#myFunction', data: [{ fn: 'sin(x)', color: 'red' }], grid: true, yAxis: {domain: [-1, 1]}, xAxis: {domain: [0, 2*Math.PI]} }; function plot() { var f = document.querySelector("#function").value; var xMin = document.querySelector("#xMin").value; var xMax = document.querySelector("#xMax").value; var yMin = document.querySelector("#yMin").value; var yMax = document.querySelector("#yMax").value; var color = document.querySelector("#color").value; parameters.data[0].fn = f; parameters.xAxis.domain = [xMin, xMax]; parameters.yAxis.domain = [yMin, yMax]; parameters.data[0].color = color; functionPlot(parameters); }
Code css : 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 h1{ text-align: center; color: sienna; text-shadow: -2px 2px 2px black; } .layer{ width: 70%; margin-right: auto; margin-left: auto; } section { border:4px solid grey; border-radius:15px; box-shadow: 5px 5px 5px grey; float:left; height:400px; padding: 20px; margin:10px; } #plotSettings { width:160px; } #plot { width:550px; }
Partager