Chart.js报表制作

浏览数：267 / 时间：2015年06月09日

需要引入Chart.js

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发货趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
		var barChartData = {
			labels : [ "7月20日", "7月21日", "7月22日", "7月23日", "7月24日", "7月25日",
					"7月26日" ],
			datasets : [ {
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [ 65, 59, 90, 81, 56, 55, 40 ]
			}, {
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [ 28, 48, 40, 19, 96, 27, 100 ]
			} ]
		};

	
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).Bar(barChartData);
		//new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
	</script>
</body>
</html>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发展趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
	var data = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [28,48,40,19,96,27,100]
				}
			]
		};

	
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).Line(data);
		
	</script>
</body>
</html>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发展趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
	var data = {
			labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [28,48,40,19,96,27,100]
				}
			]
		};

	
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).Radar(data);
		
	</script>
</body>
</html>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发展趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
	var data = [
	        	{
	        		value : 30,
	        		color: "#D97041"
	        	},
	        	{
	        		value : 90,
	        		color: "#C7604C"
	        	},
	        	{
	        		value : 24,
	        		color: "#21323D"
	        	},
	        	{
	        		value : 58,
	        		color: "#9D9B7F"
	        	},
	        	{
	        		value : 82,
	        		color: "#7D4F6D"
	        	},
	        	{
	        		value : 8,
	        		color: "#584A5E"
	        	}
	        ];

	
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).PolarArea(data);
		
	</script>
</body>
</html>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发展趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
	var data = [
	        	{
	        		value: 30,
	        		color:"#F38630"
	        	},
	        	{
	        		value : 50,
	        		color : "#E0E4CC"
	        	},
	        	{
	        		value : 100,
	        		color : "#69D2E7"
	        	}			
	        ];

	
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).Pie(data);
		
	</script>
</body>
</html>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
	<legend>发展趋势</legend>
	<canvas id="bar" height="400" width="821"></canvas>
	<script>
	var data = [
	        	{
	        		value: 30,
	        		color:"#F7464A"
	        	},
	        	{
	        		value : 50,
	        		color : "#E2EAE9"
	        	},
	        	{
	        		value : 100,
	        		color : "#D4CCC5"
	        	},
	        	{
	        		value : 40,
	        		color : "#949FB1"
	        	},
	        	{
	        		value : 120,
	        		color : "#4D5360"
	        	}

	        ];
		var ctx = document.getElementById("bar").getContext("2d");
		var myNewChart = new Chart(ctx).Doughnut(data);
		
	</script>
</body>
</html>