Bitte haben Sie etwas Geduld,
die Daten werden geladen.

laptop

Javascript 3D Tortendiagramm

 

Für eine Web-App, die ich 2011 bearbeitet habe, sind diese Javascript Bibliotheken entstanden.
Zu der Zeit war ich glühender Fan des mootools-Frameworks. Ein Objektorientierter Ansatz in Javascript und dann noch  komplett mit Vererbung schien mir damals das "Nonplusultra" zu sein. Somit wird dieses benötigt, um meine Klasse auszuführen.

Leider verlief sich das App-Projekt im Sand, weshalb ich meine Js-3D-Bibliothek nie fertiggestellt habe.

 

<script type="text/javascript" src="/CanvasHelper.js"></script>
<script type="text/javascript" src="/canvas.text.js"></script>
<script type="text/javascript" src="/mootools-core-1.3-full-compat.js"></script>

<script type="text/javascript" src="/JS3D/MatrixHelper.js"></script>
<script type="text/javascript" src="/JS3D/JS3D_RGBA.js"></script>
<script type="text/javascript" src="/JS3D/JS2D_Point.js"></script>
<script type="text/javascript" src="/JS3D/JS3D_Point.js"></script>
<script type="text/javascript" src="/JS3D/JS3D_Face.js"></script>
<script type="text/javascript" src="/JS3D/PieChart_Slice.js"></script>
<script type="text/javascript" src="/JS3D/PieChart.js"></script>
<!-- contains the 'magic' -->
<script type="text/javascript" src="/init_PieChart.js"></script>

<canvas id="3DPieChart" width="370" height="300">
</canvas>

 

 

2012 hatte ich den Code noch einmal hervorgeholt und angefangen ihn als jQuery-Plugin umzusetzen. Durch den Mootools-Ballast ist es allerdings bei dem Versuch geblieben. Wer aber möchte, dem sei es freigestellt sich mit meinem Code zu befassen.

Das Paket enthält folgende 3rd Party Komponenten:

  • jQuery (1.6.4)
  • mootools (1.2.4)
  • Class.Mutators.jQuery (by Ryan Florence, Christoph Pojer, Ibolmo Maldonado)
  • canvas.text (Fabien M�nager)

 

Quelle der Demo-Datei:

	<script type="text/javascript" src="/CanvasHelper.js"></script>
	<script type="text/javascript" src="/canvas.text.js"></script>
	<script type="text/javascript" src="/jquery-1.6.4.min.js"></script>

	<script type="text/javascript" src="/mootools-1.2.4-base.js"></script>
	<script type="text/javascript" src="/Class.Mutators.jQuery.js"></script>

	<script type="text/javascript" src="/JS3D/MatrixHelper.js"></script>
	<script type="text/javascript" src="/JS3D/JS3D_RGBA.js"></script>
	<script type="text/javascript" src="/JS3D/JS2D_Point.js"></script>
	<script type="text/javascript" src="/JS3D/JS3D_Point.js"></script>
	<script type="text/javascript" src="/JS3D/JS3D_Face.js"></script>
	<script type="text/javascript" src="/JS3D/PieChart_Slice.js"></script>
	<script type="text/javascript" src="/JS3D/PieChart.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#container").piechart({
		canvas: "#3DPieChart",
		canvasWidth: 300,
		canvasHeight: 300,
		height: 15,
		radius: 80,
		distance: 250
	});
	var chart = $("#container").piechart();
	chart.addSlice(.18,new JS3D_RGBA(220,220,20,.8),"Fett");
	chart.addSlice(.26,new JS3D_RGBA(20,200,20,.8),"Protein");
	chart.addSlice(.43,new JS3D_RGBA(200,20,20,.8),"Kohlenhydrate");
	chart.addSlice(.13,new JS3D_RGBA(120,120,120,.8),"Balaststoffe");
	chart.draw();

});
</script>

<div id="container">
<canvas id="3DPieChart" width="300" height="300"></canvas>
</div>

 

Anhänge:
Diese Datei herunterladen (JS3DPieChart-0.2a.zip)JS3DPieChart.jquery-0.2a.zip[der jQuery-Alternative]60 KB20:51 06.02. 2017
Diese Datei herunterladen (JS3DPieChart-mootools-0.2a.zip)JS3DPieChart-mootools-0.2a.zip[die originale Mootools-Version 0.2 alpha]142 KB20:49 06.02. 2017