Chart.js报告

引进需要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>

Chart.js报告-LMLPHP

<%@ 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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1cGVuZ19mYW1pbHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

<%@ 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>

Chart.js报告-LMLPHP

<%@ 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>

Chart.js报告-LMLPHP

<%@ 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>

Chart.js报告-LMLPHP

<%@ 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>

Chart.js报告-LMLPHP