Da WIKI CoderDojo Firenze.
(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...")
 
Riga 1: Riga 1:
= Disegnare un grafico in una pagina HTML =
+
= [[Category:Javascript|G]]Disegnare un grafico in una pagina HTML =
  
 
Il file Grafico.html (trovate tutto in [[Media:Grafico.zip|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.
 
Il file Grafico.html (trovate tutto in [[Media:Grafico.zip|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.

Versione delle 15:11, 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.