(Creata pagina con "= Disegnare un grafico in una pagina HTML = Il file Grafico.html (trovate tutto in Grafico.zip) contiene la parte html e javascript necessarie per visua...") |
(Nessuna differenza)
|
Versione delle 16:09, 24 gen 2016
Disegnare un grafico in una pagina HTML
Il file Grafico.html (trovate tutto in Grafico.zip) contiene la parte html e javascript necessarie per visualizzare il grafico di una funzione matematica y = f(x), naturalmente questa funzione deve essere inserita come funzione javascript con un parametro, ovvero la variabile x ed un valore di ritorno che contiene il valore y di f(x). Ponete attenzione al valore di ritorno: deve essere un numero; a parte questo la funzione non ha altre restrizioni.
La parte html ha un titolo e l'elemento che consente di disegnare il grafico, un tag canvas con 'id' e dimensioni desiderate.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grafici</title> <style> .container { width: 700px; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="container"> <center> <h1>Grafico</h1> <br/> <canvas id="grafico" width="640" height="480"></canvas> </center> </div> <script type="text/javascript"> ... </script> </body> </html>
La parte javascript contiene 4 funzioni utilizzabili come esempi di y = f(x).
// Esempi di funzione function fun1(x) {return Math.sin(x); } function fun2(x) {return Math.cos(3*x);} function fun3(x) {return fun1(x) * fun2(5*x);} function fun4(x) {return fun1(x*x) * fun2(x);} //Inizializzazione Canvas var canvas = document.getElementById('grafico'), ctx = canvas.getContext("2d"), graph = {}, axes = {};
Nella parte di definizione delle variabili il tag canvas viene inserito in una variabile e recuperato il suo contesto bidimensionale. In Html il canvas è un oggetto complesso, cioé contenente molti metodi per disegnare, sia in 2D che in 3D, questi metodi sono esposti nel contesto ottenuto con getContext.
Seguono le due funzioni che disegnano gli assi ed il grafico vero e proprio.
La funzione 'funGraph' prende 3 parametri il primo è la funzione da disegnare, seguono il colore e lo spessore della linea utilizzata.
function funGraph (func,color,thick) { var dx = graph.step || 4; var iMax = Math.round((ctx.canvas.width - axes.x0)/dx); var iMin = graph.drawNegative ? Math.round(-axes.x0/dx) : 0; graph.scaleX = graph.scaleX || 40; graph.scaleY = graph.scaleY || graph.scaleX || 40; ctx.beginPath(); ctx.lineWidth = thick; ctx.strokeStyle = color; for (var i=iMin;i<=iMax;i++) { var x = dx*i; var y = graph.scaleY*func(x/graph.scaleX); if (i==iMin) ctx.moveTo(axes.x0 + x, axes.y0 - y); else ctx.lineTo(axes.x0 + x, axes.y0 - y); } ctx.stroke(); }; function showAxes() { var xmin = graph.drawNegative ? 0 : axes.x0; ctx.beginPath(); ctx.strokeStyle = "rgb(128,128,128)"; // X axis ctx.moveTo(xmin, axes.y0); ctx.lineTo(ctx.canvas.width, axes.y0); // Y axis ctx.moveTo(axes.x0, 0); ctx.lineTo(axes.x0, ctx.canvas.height); ctx.stroke(); };
La parte che segue disegna lo sfondo ed il contorno del grafico ed inizializza la posizione degli assi, la scala del grafico e la definizione cioè il numero di pixel usati ad ogni passo della variabile x.
Infine chiama le funzioni precedenti per disegnare gli assi e due delle funzioni di esempio.
// Preparo il grafico graph.scaleX = 50; // 50 pixels from x=0 to x=1 graph.scaleY = 80; // 80 pixels from y=0 to y=1 graph.step = 2; // 2 pixels step graph.drawNegative = true; // Coloriamo lo sfondo ctx.fillStyle = "lightgreen"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Disegniamo il bordo ctx.strokeStyle = "black"; ctx.strokeRect(0, 0, canvas.width, canvas.height); // Preparo gli assi axes.x0 = (canvas.width + 1.) / 2; axes.y0 = (canvas.height + 1.) / 2; // visualizzo assi cartesiani showAxes(); // disegno funzioni funGraph(fun1,"rgb(11,153,11)",1); funGraph(fun3,"rgb(66,44,255)",2);
Evoluzione
Il file grafico2.html contiene una evoluzione del precedente.
Contiene sostanzialmente lo stesso codice, ma inserito in un oggetto che espone 3 metodi. Riscritto in questo modo l'oggetto, inserito nella variabile 'grafico', rende possibile la creazione di più grafici nella stessa pagina.
Il metodo 'attach' da chiamare per primo, associa un tag canvas al grafico e opzionalmente mdifica le variabili di disegno.
Il metodo 'drawAxes' disegna gli assi.
E naturalmente il metodo 'drawGraph' disegna la funzione passata.