javascript
/
tentone.escher.js
дзеркало https://github.com/tentone/escher.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Charts</title>
</head>
<body style="font-size:30px; font-family: Arial;">
	<!-- Page -->
	<div style="position:absolute; width:100%; height:100%; top:0px; left:0px; overflow: hidden;">
		<!-- Canvas -->
		<canvas id="canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px;"></canvas>
	</div>

	<!-- Code -->
	<script type="text/javascript" src="../build/escher.js"></script>
	<script type="text/javascript">
		// Canvas
		var canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		// Resize canvas on window resize
		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};

		var group = new Escher.Object2D();

		// Gauge data
		var gauge = new Escher.Gauge();
		gauge.radius = 100;
		gauge.position.set(100, 50);
		gauge.draggable = true;
		group.add(gauge);

		// Graph data
		var graph = new Escher.Graph();
		graph.box.min.set(-500, -50);
		graph.box.max.set(500, 50);
		graph.position.set(300, 400);
		graph.draggable = true;
		group.add(graph);

		Escher.Helpers.boxResizeTool(graph);
		for(var i = 0; i < 300; i++)
		{
			graph.data.push(Math.random() * 9 + 1);
		}

		var scatter = new Escher.ScatterGraph();
		scatter.radius = 5;
		scatter.box.min.set(-500, -50);
		scatter.box.max.set(500, 50);
		scatter.position.set(800, 600);
		scatter.draggable = true;
		group.add(scatter);

		Escher.Helpers.boxResizeTool(scatter);
		for(var i = 0; i < 100; i++)
		{
			scatter.data.push((Math.cos(i / 3) + 1) * 3);
		}

		var scatterLine = new Escher.ScatterGraph();
		scatterLine.radius = 5;
		scatterLine.box.min.set(-500, -50);
		scatterLine.box.max.set(500, 50);
		scatterLine.position.set(800, 600);
		scatterLine.draggable = true;
		scatterLine.drawLine = true;
		group.add(scatterLine);

		Escher.Helpers.boxResizeTool(scatterLine);
		for(var i = 0; i < 100; i++)
		{
			scatterLine.data.push((Math.cos(i / 3) + 1) * 3);
		}

		var bar = new Escher.BarGraph();
		bar.box.min.set(-500, -50);
		bar.box.max.set(500, 50);
		bar.position.set(500, 1000);
		bar.draggable = true;
		group.add(bar);

		Escher.Helpers.boxResizeTool(bar);
		for(var i = 0; i < 100; i++)
		{
			bar.data.push((Math.cos(i / 3) + 1) * 3);
		}

		var pieData = [
			{value: 10, fillStyle: new Escher.ColorStyle("#FD5748"), strokeStyle: null},
			{value: 15, fillStyle: new Escher.ColorStyle("#23AB48"), strokeStyle: null},
			{value: 5, fillStyle: new Escher.ColorStyle("#6285F8"), strokeStyle: null}
		];

		var pie = new Escher.PieChart(pieData);
		pie.radius = 100;
		pie.position.set(1000, 1000);
		pie.draggable = true;
		group.add(pie);

		var pie = new Escher.PieChart(pieData);
		pie.sliceSize = true;
		pie.radius = 200;
		pie.position.set(500, 800);
		pie.draggable = true;
		group.add(pie);

		var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
		var shape = new Escher.Path(path);
		group.add(shape);

		var viewport = new Escher.Viewport(canvas);

		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(group, viewport);
	</script>
</body>
</html>