Tracer une courbe en javascriptVoici un script courbe.js qui permet de tracer une courbe à partir d'une liste de données. Ce scripte génère à titre d'exemple une liste M de 200 entiers au hasard compris entre 0 et 100, et l'affiche sous forme de courbe. La commande suivante met en mémoire dans la variable W1 l'élément de la page web dont l'identifiant est "canvas1".
Cet élément W1 correspond à l'élément définie dans le fichier html par :
Puis le scripte execute la commande suivante :
Cette commande va afficher la courbe définie par M dans le canevas W1 en tenant compte de la taille de W1, c'est à dire des attributs width et height de W1. La courbe définie par M trace les points (i,M[i]) reliés par segment de droite au point précédent. L'ordonnée i variant de 0 à M.length-1. L'abscisse M[i] varie du minimum au maximum de M. Le graphique et segmenté en au moins 4 segments en abscisse et 4 segments en ordonnée. Puis le scripte trie la liste M dans l'ordre croissant à l'aide de la commande suivante :
et réaffiche la courbe dans le caneva W2 à l'aide de la commande suivante :
oOo
|
window.addEventListener("load", run, false) function rand(n) { return Math.floor(n * Math.random()) } function minMax(M){ a=Infinity b=-Infinity let L = M.length for(var i=0;i<L;i++){ if (M[i]<a) {a=M[i]} if (M[i]>b) {b=M[i]} } return [a,b] } function draw(W,M,ny,nx,legendY,legendX,titre1,titre2) { function cc(s,n){ while (s.length<n) s = " "+s return s } let m = 52 // marge let Lx = W.getAttribute("width")-2*m let Ly = W.getAttribute("height")-2*m let L = M.length let [a,b] = minMax(M) let ctx = W.getContext("2d"); let d = (b-a)/ny let e = 0 while (d<1) {d*=10,e--;} while (d>10) {d/=10,e++;} if(d<2) Q=1 else if(d<4) Q=2 else Q=5 let e0=Math.floor(e/3)*3 // pour obtenir des entiers compris entre 0 et 999 //Erreur à corriger, valable seulement si ny=1. let e1=e-e0 Sig = new Array("p","n","µ","m",' ',"K","M","G","T") let s = Sig[4+e0/3]; e0=Math.pow(10,e0) e1=Math.pow(10,e1) a/=e0 b/=e0 Q*=e1 let a0 = Math.floor(a/Q)*Q a=a0 let gx = Lx/(L-1) let gy = Ly/(b-a) function fx(x) {return x*gx + m} function fy(y) {return Ly-(y-a)*gy + m} let n = (b-a)/Q+2 ctx.strokeStyle = "grey" //ctx.fillStyle = "rgba(255, 255, 0, .5)" ctx.beginPath() ctx.clearRect(0,0,Lx+2*m,Ly+2*m); for(let j=0; j<n; j++){ g = a0 + j*Q if (g<b) { let y=fy(g) ctx.moveTo(m, y); ctx.lineTo(Lx+m, y); ctx.fillText(cc(g.toString()+" "+s,9), 3, y); } } ctx.stroke(); ctx.font = "9pt serif" ctx.measureText("blabla") ctx.strokeStyle = "grey" ctx.beginPath() ctx.fillText(titre1, m + Lx/3, m/3); ctx.fillText(titre2, m + Lx/3, 2*m/3); ctx.moveTo(m, m); ctx.lineTo(m, Ly+m); ctx.fillText(legendY, 5, m-12); ctx.moveTo(m, Ly+m); ctx.lineTo(Lx+m, Ly+m); ctx.fillText(legendX, Lx + m -25, Ly + m + 25); ctx.stroke(); ctx.strokeStyle = "red" ctx.beginPath() ctx.moveTo(fx(0),fy(M[0]/e0)) for(let i=1;i<L;i++) ctx.lineTo(fx(i),fy(M[i]/e0)) ctx.stroke() let dd = L/nx let ee = 0 while (dd>10) {dd/=10,ee++;} if(dd<2) Q=1 else if(dd<4) Q=2 else Q=5 let e00=Math.floor(ee/3)*3 // pour obtenir des entiers compris entre 0 et 999 let e1_=ee-e00 Sig = new Array("p","n","µ","m",' ',"K","M","G","T") let sx = Sig[4+e00/3]; e00=Math.pow(10,e00) e1_=Math.pow(10,e1_) Q*=e1_ let dx=Q*e00 ctx.strokeStyle = "grey" ctx.beginPath() for(let j=0; j<L; j+=dx){ let x=fx(j) if (x<Lx+m) { ctx.moveTo(x, Ly+m); ctx.lineTo(x, m); ctx.fillText(j/e00.toString()+" "+sx, x - 4, Ly + m + 12); } } ctx.stroke(); } function run(){ var M = new Array(); for (var i=0;i<200;i++){ M[i] = rand(100)*rand(100) } W1 = document.getElementById("canvas1"); draw(W1,M,4,4,"Valeur", "N° d'enregistrement", "Liste des valeurs", "dans l'ordre d'enregistrement"); M.sort(function(a,b){return a>=b;}); W2 = document.getElementById("canvas2"); draw(W2,M,4,4,"Valeur", "N° d'ordre", "Rangement des valeurs", "dans l'ordre croissant"); } |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>courbe</title> <style> body {margin:0} canvas {background:#EEEEEE} </style> <script type="text/javascript;version=1.8" src="courbe.js"></script> </head> <body> <canvas id="canvas1" width="800" height="400"></canvas><br> <canvas id="canvas2" width="800" height="400"></canvas> </body> </html> |