Diagramme in HTML5 Canvas darstellen

Author: Jörg Vollrath



Ein Javascript 'Chart_basic.js' zur graphischen Darstellung von Werten wird hier vorgestellt und getestet.
Es bietet grundlegende Funktionen die in 500 Zeilen Javascript (17KByte) implementiert wurden.
Da die Werte direkt im HTML Quellcode erzeugt werden stehen Sie für weitere Rechnungen zur Verfügung.
Man könnte die Werte auch als Tabelle ausgeben.
Es sollten zu Testzwecken 4 Graphen mit linearer und logarithmischer Teilung dargestellt werden .

Bei Click auf die Grafik werden die Werte in einer Tabelle dargestellt, wenn 'ScatterPlotX' verwendet wird.

Verwendung


Es wird nur die Datei 'Chart_basic.js' benötigt und im HTML Dokument verwendet.
Speichern Sie einfach diese Webseite lokal ab.
Als erstes definiert man einen Platzhalter für die Grafik mit dem Canvas-Element.
Um zwei Sinusfunktionen und eine Gerade darzustellen, kann man mit Javascript die Werte direkt in der HTML Datei erezugen.
Dann ruft man die Funktion 'ScatterPlot' auf.
	  ScatterPlot("Chartid","Chartname",x,20,"xaxisname","lin","auto","yaxisname","lin","auto","nogrid");
Chartid ist die id des Canvas Elements.
Chartname wird als Überschrift aus gegeben.
Dann kommt ein Array x und die Anzahl der Werte pro Kurve, hier im Beispiel 20.
xaxisname wird an der x Achse ausgegeben.
Der Typ der Achse kann als "lin" oder "log" gewählt werden.
Sie Skalierung folgt entweder mit "auto" oder mit "minmax".

Bei der linearen Skalierung kann man mit einer nachgestellten Null die Null einschliessen: "auto0" oder "minmax0".
Zum Schluss wird definiert, ob ein Gitter dargestellt werden soll: "Fine","Grid" oder "nogrid".

Hier der HTML/Javascript Quelltext für 2 Graphen:
      <canvas id="Chartid" width="600" height="400">   </canvas> <br>
 
   <div id="container1">
      <canvas id="Chartid1" width="100" height="50">   </canvas>
      <div id="controlsidx"> </div>
      <script type="text/javascript"> 
<!-- Begin
	    var x=new Array();  
		for (var i=0; i<20; i++) {
           x[i]= i-4; 
		   x[i+20]=i/20; 
		   x[i+40]=5*Math.sin(x[i]); 
		   x[i+60]=7*Math.cos(x[i]);
		}
	  ScatterPlot("Chartid","Chartname",x,20,"xaxisname","lin","auto","yaxisname","lin","auto","nogrid");
	  drawLabelxy(5,"lin",8,"lin","Maximum", "center", "top")
	  ScatterPlot("Chartid1","Chartname",x,20,"xaxisname","lin","auto","yaxisname","lin","auto","nogrid");
  //  End -->
	  </script>
Man kann die Daten auch per Javascript aus einem div-Abschnitt holen.
Setzt man 
 style="display:none"
werden die Daten verborgen.

10,1,10
20,2,-10
30,3,10
40,4,-10

Mit der Funktion 
  function drawLabelxy(x,xstyp,y,ystyp,text,base, align)
kann man die Grafik mit Text Beschriften, wobei man als Bezugskoordinatensystem nicht das Canvas-Element hat, sondern die x und y Achsen.
xstyp und ystyp sind "lin" oder "log" damit richtig skaliert wird.
x und y geben die Zielwerte für die Position des Textes an.
base kann "Top","Bottom" oder "Middle" sein.
align kann "start", "end", "left", "center", or "right" sein.

Man kann auch eine Linie in den Graphen zeichnen.
  function drawLinexy(x,xstyp,y,ystyp,x1,y1) {
Mit folgender Funktion kann man die Dicke lw und Farbe color, als Hexadezimalstring z.B. '#0000ff' für Blau, der Linie setzen. 
  function setStroke(lw,color)
Eine Legende wird durch Aufruf von setLegend vor der Zeichenfunktion dargestellt. 
	  var leg="X=1,X=2,X=3";
	  setLegend(leg);

Table to chart

Der folgende Abschnitt legt die Achsen und Formatierung fest.
Test

X: Anzahl schritte, lin, minmax
Y:Anzahl ereignisse, lin, auto
Grid

000
121
242
393

Dies ist der entsprechende JavaScript code.
      <span id="chartCN">Test</span><br><br> 
   X: <span id="chartX">Anzahl schritte</span>, <span id="chartXL">lin</span>, 
     <span id="chartXSC">minmax</span><br> 
   Y:<span id="chartY">Anzahl ereignisse</span>,
	 <span id="chartYL">lin</span>, <span id="chartYSC">auto</span><br>
      <span id="chartGR">Grid</span><br><br> 
      <table id="chartTB" border="1"><tbody>
        <tr><td>0</td><td>0</td><td>0</td></tr>
        <tr><td>1</td><td>2</td><td>1</td></tr>
        <tr><td>2</td><td>4</td><td>2</td></tr>
        <tr><td>3</td><td>9</td><td>3</td></tr>
       </table>

      <script type="text/javascript"> 
<!-- Begin
		tableChart("chartTB",400,400);
  //  End -->
	  </script>


Geschichte


Entwicklungsaufwand


ca. 40 Stunden über 2 Monate verteilt.


Version 0 19.10.2012:


- Lineare Darstellung mit schönen Achsen.
- Marker werden bei den Linien dargestellt.
- Logarithmische Darstellung wurde implementiert.
- Ein grobes und feines Gitter kann aktiviert werden.

ToDo:


- Formatierung großer Zahlen an den Achsen.
- Darstellung von Punkten ohne Verbindung.
- Implementierung eines Boxplots mit einem Histogramm.
- Text Skalierung.

Wie kann man die Darstellung schön skalieren?


Es gibt eine Bildschirmauflösung in dpi.
Es gibt eine Bildschirmgröße 8..15".
Es gibt eine Fenstergröße des Browsers.
Es gibt die Canvasgröße und Schriftgröße.
Wie lautet die Skalierungsformel?



Revision: 002 Date: 15.January.2015