Canvas jQuery Diagramm

Um Diagramme auf der Webseite darzustellen, hat man auf Grafiken zurückgreifen müssen. Mit html5 ist es möglich diese auch via Canvas (Leinwand, Gemälde) zu präsentieren. Dazu haben wir ein kleines Tutorial geschrieben, wie Ihr einfach die Anzahl der verkauften Produkte ausgeben könnt.

Canvas hat den Vorteil, dass wir die Koordinaten direkt von der Fläche abgreifen können, somit ist von unserem Canvas (#linie), die linke oberste Ecke Y = 0 und X = 0.

Damit wir mit Canvas arbeiten können, müssen wir folgenden html-Tag in unser Dokument einfügen.

<canvas id="linie" width="600" height="450"></canvas>

Die Umsetzung, der Anzeige, erfolgt auf JavaScript Basis, dazu müssen wir unser Canvas-Element einlesen. Auf dieser Flächen können wir jetzt alles Zeichnen, in unserem Fall ein Diagramm, aber erstmal nur eine schräge Linie.

var context = jQuery("#linie").get(0).getContext("2d");

Eine einfache Linie erstellen wir mit .moveTo und LineTo. Mit .moveTo bestimmen wir den Startpunkt unserer Linie und mit .lineTo den Endpunkt, immer ausgegangen von der Koordinate 0, 0 (linke obere Ecke von Canvas). Mit .stroke zeichnen wir unsere Linie auf die Fläche und .strokeStyle können wir die Farbe anpassen.

var YfromLeft = 10;
var YfromTop = 10;
var YtoLeft = 590;
var YtoTop = 440;
context.moveTo(YfromLeft, YfromTop);
context.lineTo(YtoLeft, YtoTop);
context.strokeStyle = "orange";
context.stroke();

Unser Canvas-Element (#linie) sieht jetzt so aus:

Eine Einfach Linie können wir jetzt, Ebenen werden automatisch nach der Reihenfolge angelegt, mit unterschiedlichen Farben müssen wir .beginPath() hinzufügen.

var context = jQuery("#zwei_linien").get(0).getContext("2d");
context.beginPath();
context.moveTo(10, 10);
context.lineTo(590, 440);
context.strokeStyle = "green";
context.stroke();
context.beginPath();
context.moveTo(590, 10);
context.lineTo(10, 440);
context.strokeStyle = "blue";
context.stroke();

Auch Dreiecke, Vierecke oder Keise sind kein Problem.

var context = jQuery("#zwei_linien_dreieck").get(0).getContext("2d");
//linie 1
context.beginPath();
context.moveTo(10, 10);
context.lineTo(590, 440);
context.strokeStyle = "green";
context.stroke();
//linie 2
context.beginPath();
context.moveTo(590, 10);
context.lineTo(10, 440);
context.strokeStyle = "blue";
context.stroke();
//dreieck
context.save();
context.beginPath();
context.moveTo(300, 50);
context.lineTo(550, 400);
context.lineTo(50, 400);
context.lineTo(300, 50);
context.strokeStyle = "orange";
context.stroke();
context.globalAlpha = 0.5;
context.fillStyle = "yellow";
context.fill(); 
context.restore();

Jetzt können wir unser Wissen bei einem Diagramm anwenden, dazu haben wir das folgende Beispiel programmiert.

jQuery(document).ready(function() {
	var selectOptions = jQuery("select[name='category']").html();
	var ctx = jQuery("#chart").get(0).getContext("2d");
	//getChart(ctx, YfromLeft, YfromTop, YtoTop)
	getChart(ctx, 50, 10, 400, selectOptions);
});
function getChart(ctx, YfromLeft, YfromTop, YtoTop, selectOptions) {
	canvasWidth = jQuery("#chart").width();
	canvasHeight = jQuery("#chart").height();
	ctx.translate(0.5, 0.5); 
	//Y
	ctx.moveTo(YfromLeft, YfromTop);
	ctx.lineTo(YfromLeft, YtoTop);
	//Y Arrow left
	ctx.moveTo(YfromLeft, YfromTop);
	ctx.lineTo(YfromLeft - 5, YfromTop + 5);
	//Y Arrow right
	ctx.moveTo(YfromLeft, YfromTop);
	ctx.lineTo(YfromLeft + 5, YfromTop + 5);
	//X
	ctx.moveTo(YfromLeft, YtoTop);
	ctx.lineTo(canvasWidth - YfromTop, YtoTop);
	//X Arrow top
	ctx.moveTo(canvasWidth - YfromTop, YtoTop);
	ctx.lineTo(canvasWidth - YfromTop - 5, YtoTop - 5);
	//X Arrow bottom
	ctx.moveTo(canvasWidth - YfromTop, YtoTop);
	ctx.lineTo(canvasWidth - YfromTop - 5, YtoTop + 5);
	ctx.strokeStyle = "#000";
	ctx.stroke();
	ctx.font = "normal 16px arial";
	ctx.fillText("Produkt", canvasWidth / 2, canvasHeight - (YfromLeft / 2 - 4));
	ctx.save();
	ctx.translate(YfromLeft / 2 + 4, canvasHeight / 2 + 50);
	ctx.rotate(-0.5 * Math.PI);
	ctx.fillText("Verkauft in Stück", 0, 0);
	ctx.restore();
	getProducts(ctx, YfromLeft + 5, canvasHeight - YfromLeft, canvasWidth, canvasHeight, selectOptions);
}
function getProducts(ctx, barFromLeft, barFromBottom, canvasWidth, canvasHeight, selectOptions) {
	ctx.translate(0.5, 0.5);
	var salesData = [
		{category: "Schuhe", sales: 150, color: "red"}, 
		{category: "Mützen", sales: 125, color: "blue"}, 
		{category: "Jacken", sales: 300, color: "green"}
	];
	var category, sales;
	var barWidth = 30;
	var xPos = barFromLeft; 
	jQuery.each(salesData, function(i, item) {
		var x = 0;
		var interval = setInterval(function() { 
			x += 1;
			ctx.save();
			ctx.fillStyle = salesData[i].color;
			ctx.fillRect(barFromLeft + (barWidth * i) + (10 * i), barFromBottom - x - 1, barWidth, x);
			ctx.restore();
			if(x == salesData[i].sales) {
				clearInterval(interval);
				ctx.save();
				ctx.translate(barFromLeft  + (barWidth * i) + (10 * i) + barWidth - 8, barFromBottom - 5);
				ctx.rotate(-0.5 * Math.PI);
				ctx.fillStyle = "#000";
				ctx.fillText(salesData[i].sales+" x "+salesData[i].category, 0, 0);
				ctx.restore();
				xPos += barWidth + 10;
			}
		}, 1);
	});
	jQuery("button[name='remove']").click(function() {
		ctx.clearRect(55, 0, 530, 399);
		jQuery("select[name='category'] option").remove();
		jQuery("select[name='category']").append(selectOptions);
		xPos = barFromLeft;
	});
	jQuery("button[name='add']").click(function() {
		if(jQuery("input[name='anzahl']").val() && jQuery("select[name='category']").val()) {
			var x = 0;
			var interval = setInterval(function() {
				x += 1;
				ctx.save();
				if(jQuery("input[name='color']").val() == "FFFFFF") ctx.fillStyle = "#f0f0f0";
				else ctx.fillStyle = "#"+jQuery("input[name='color']").val();
				ctx.fillRect(xPos, barFromBottom - x - 1, barWidth, x);
				ctx.restore();
				if(x == jQuery("input[name='anzahl']").val()) {
					clearInterval(interval);
					ctx.save();
					ctx.translate(xPos + barWidth - 8, barFromBottom - 5);
					ctx.rotate(-0.5 * Math.PI);
					ctx.fillStyle = "#000";
					ctx.fillText(jQuery("input[name='anzahl']").val()+" x "+jQuery("select[name='category']").val(), 0, 0);
					ctx.restore();
					xPos += barWidth + 10;
					jQuery("input[name='anzahl']").val("");
					jQuery("select[name='category'] option[value='"+jQuery("select[name='category']").val()+"']").remove();
					jQuery("select[name='category']").val(0);
					jQuery("input[name='color']").val("ffffff").focus().blur();
				}
			}, 1);
		}
	});
}

Mit Canvas kann man Diagramme auch etwas moderner Darstellen.

Canvas ist eine gute Alternative zu Grafiken, mit einfachen Skripten können wir schöne Ansichten erstellen und verändern.

Hier könnt Ihr euch unser Beispiel Downloaden und anpassen: canvas_jquery_diagramm.zip

Kommentare

Kommentare können nur mit einer Verifizierten E-Mail-Adresse geschrieben werden, die E-Mail-Adresse muss einmal bestätigt werden.
@
(success)