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>

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

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

Chart.js报告的更多相关文章

关于chart.js 设置canvas的宽度为父级元素的宽度的百分百以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
chart.js 里添加图表的清单：
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
数据可视化(1)--Chart.js
Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图效果预览实例代码 <div class="htmleaf-container"> <div ...
让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

随机推荐

[Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...
php面试题5
php面试题5 一.总结二.php面试题5 1. 什么事面向对象?主要特征是什么?1) 面向对象是程序的一种设计方式,它利于提高程序的重用性,是程序结构更加清晰.2) 主要特征:封装.继承.多态 2 ...
结构体什么时候用.什么时候用->
ZOJ 3204 Connect them 继续MST
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3367 题目大意: 让你求最小生成树,并且按照字典序输出哪些点连接.无解输出-1 ...
redisson
http://www.tuicool.com/articles/BjyeaeQ http://blog.csdn.net/csujiangyu/article/details/51005342
【AJAX】AJAX实现搜索信息自己主动推荐并补全
好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完.我们在搜索引擎中输入文字时文本框下会提示对应的信息,这个案例就是实现这样的基本功能,代码比較粗糙还须要进一步完好,当中有些地方也须要向 ...
css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
Django之文章归档
1.任务描述:将博文按照时间月份归档 2.源代码: views.py def getPage(request, article_list): paginator = Paginator(article ...
PatentTips – CoAP Segment size determination
BACKGROUND OF THE INVENTION The subject matter disclosed herein relates to routing data through a ne ...
阿里云域名和ip绑定步骤
阿里云域名和ip绑定步骤一.总结一句话总结:域名转IP信息存在所在地运营商那,比如电信联通等. 1.给域名添加对应ip的过程叫做什么? 域名解析 2.域名解析中的记录代表什么意思,记录值呢? 记录 ...

Chart.js报告

Chart.js报告的更多相关文章

随机推荐

热门专题