News CONSUS OKAS Fachartikel Spiele Impressum
 
HTML 5.0 Canvas Element einen Graphen im X Y Koordinaten System erstellt, um z.B. eine Statistik grafisch darstellen zu können.
Es wird hierbei der reine Javascript Code beschrieben, den man selbstverständlich mit PHP editieren und aus einer Datenbank füllen kann.

Als erstes benötigen wir natürlich ein Canvas Element:
1:
<CANVAS ID="graph" WIDTH="500" HEIGHT="280">
Nun beginnt der Javascript Teil mit dem wir das Canvas beschreiben. Den Array values[] kann man nach belieben mit php füllen. In diesem Beispiel wird ein Graph für ein Jahr erstellt. Daher sollte das Array maximal 12 Werte haben. Hier haben wir den Array für das Beispiel einfach mit ein paar Werten statisch gefüllt.
1:
2:
3:
4:
5:
<SCRIPT TYPE="text/javascript">
var graph = document.getElementById("graph");
var graph_ctx = graph.getContext("2d");
var values = [3,12,5,8,10,7,1,0,4];
var max_value = 12;
Als nächstes erzeugen wir das generelle Layout des Graphen (x Achse, Y Achse, Raster im Hintegrund, Beschriftungen). Wir erstellen außerdem ein Rechteck mit der Größe unseres Canvas und füllen es weiß, das hat den Zweck, dass bei Speicherung des Canvas durch den Benutzer der Hintergrund des Bildes weiß ist und unsere schwarzen Linien dadurch überhaupt zu sehen sind. Nicht gezeichnete Bildpunkte werden ansonsten bei Speichern des Canvas schwarz angezeigt.
 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:
graph_ctx.strokeStyle = "rgba(0,0,0,1)";
graph_ctx.fillStyle = "rgba(255,255,255,1)";
graph_ctx.lineCap = "round";
graph_ctx.lineJoin = "round";
//hintegrund füllen -> grafik speichern
graph_ctx.fillRect(0,0,500,280);
graph_ctx.fillStyle = "rgba(0,0,0,1)";
//graphen layout erzeugen
graph_ctx.beginPath();
graph_ctx.moveTo(100,10);
graph_ctx.lineTo(100,220);
graph_ctx.stroke();
graph_ctx.beginPath();
graph_ctx.moveTo(90,210);
graph_ctx.lineTo(460,210);
graph_ctx.stroke();
//y achse beschriftung
for (i=0; i < 4; i++){
	graph_ctx.beginPath();
	graph_ctx.moveTo(95,i*50+10);
	graph_ctx.lineTo(105,i*50+10);
	graph_ctx.stroke();
}
graph_ctx.textAlign = "right";
graph_ctx.font = "bold 15px sans-serif";
graph_ctx.fillText('0', 90, 217);
graph_ctx.fillText(Math.round(max_value / 0.75 / 4),90, 167);
graph_ctx.fillText(Math.round(max_value / 0.75 / 2),90, 117);
graph_ctx.fillText(max_value,90, 67);
graph_ctx.fillText(Math.round(max_value / 0.75),90, 17);
//x achse beschriftung
for (i=1; i < 13; i++){
	graph_ctx.beginPath();
	graph_ctx.moveTo(100+i*30,205);
	graph_ctx.lineTo(100+i*30,215);
	graph_ctx.stroke();
}
graph_ctx.textAlign = "center";
graph_ctx.fillText('J', 115, 227);
graph_ctx.fillText('F', 145, 227);
graph_ctx.fillText('M', 175, 227);
graph_ctx.fillText('A', 205, 227);
graph_ctx.fillText('M', 235, 227);
graph_ctx.fillText('J', 265, 227);
graph_ctx.fillText('J', 295, 227);
graph_ctx.fillText('A', 325, 227);
graph_ctx.fillText('S', 355, 227);
graph_ctx.fillText('O', 385, 227);
graph_ctx.fillText('N', 415, 227);
graph_ctx.fillText('D', 445, 227);
//raster in background
graph_ctx.strokeStyle = "rgba(200,0,0,0.4)";
for (i=1; i < 13; i++){
	graph_ctx.beginPath();
	graph_ctx.moveTo(100+i*30,10);
	graph_ctx.lineTo(100+i*30,210);
	graph_ctx.stroke();
}
for (i=0; i < 4; i++){
	graph_ctx.beginPath();
	graph_ctx.moveTo(100,i*50+10);
	graph_ctx.lineTo(460,i*50+10);
	graph_ctx.stroke();
}
Nun beginnt die Berechnung des eigentlichen Graphen. Durch die umgedrehte Definition der Koordinaten im Informatik Bereich (der oberste Bildpunkt ist 1:1 und die y Achse nimmt nach unten hin zu) müssen wir uns eine imaginäre Null Linie denken und die errechneten Werte von dieser Abziehen. Dieser Graph hat sein oberes Ende bei 10 Pixeln und sein Null Linie bei 210 Pixeln, was uns einen Spielraum von 200 Pixeln einräumt. Wir haben unsere Werte in Prozent (heißt in einen Wertbereich von 0 - 1) berechnet und können nun die 200 Pixel Spielraum damit multiplizieren. Was uns zu einer y Koordinate von 210 - 200 * (berechneter Wert) führt.
 1:
 2:
 3:
 4:
 5:
 6:
 7:
 8:
 9:
10:
11:
12:
13:
14:
15:
//actual graph
graph_ctx.lineWidth = 4;
graph_ctx.strokeStyle = "rgba(200,0,0,1)";
graph_ctx.beginPath();
graph_ctx.moveTo(100,210);
for (i=0; i < values.length; i++){
	if (values[i] > 0){
		single_value = values[i]/(max_value/0.75);
	} else {
		single_value = 0;
	}
	graph_ctx.lineTo(30*(i+1)+85,210-200*single_value);
}
graph_ctx.stroke();
</SCRIPT>
Unser fertiges Beispiel sieht dann so aus:


Wir Wünschen viel Spaß beim Ausprobieren und wie immer gilt:
Bei Fragen, Wünschen, Anregungen oder Verbesserungen dieses Artikels kann man uns jederzeit eine Mail schicken.
Nach oben
 
Aktuelles:
  - new Beam Video
Projekte:
  - CGE Consus Game Engine
- OKAS unsere Webhosting Software
Social: