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 ...
随机推荐
- Swift 语言概览 -自己在Xcode6 动手写2-tableView
import UIKit class ViewController: UIViewController ,UITableViewDelegate, UITableViewDataSource { va ...
- 积跬步，聚小流------java获取图片的尺寸
在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于Buf ...
- 《大型网站技术架构》1：概述 分类： C_OHTERS 2014-05-07 20:40 664人阅读 评论(0) 收藏
参考自<大型网站技术架构>第1~3章 1.大型网站架构演化发展历程 (1)初始阶段的网站架构:一台服务器分别作为应用.数据.文件服务器 (2)应用服务和数据服务分离:三台服务器分别承担上述 ...
- 使用URLConnection获取网页信息的基本流程 分类： H1_ANDROID 2013-10-12 23:51 3646人阅读 评论(0) 收藏
参考自core java v2, chapter3 Networking. 注:URLConnection的子类HttpURLConnection被广泛用于Android网络客户端编程,它与apach ...
- AOP 专题
Spring框架有两个核心思想:IOC和AOP Spring IOC指的是控制翻转,使用普通JAVA Bean,在运行时由Spring容器统一管理和串联,服务于不同的流程,在开发过程中对Spring ...
- php 中英文字符串截取,字符串长度
在做PHP开发的时候,由于我国的语言环境问题,所以我们常常需要对中文进行处理.在PHP中,我们都知道有专门的mb_substr和mb_strlen函数,可以对中文进行截取和计算长度,但是,由于这些函数 ...
- android环境安装
引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...
- thinkphp3.1 缓存配置设置读取
以下黄字是我用的代码: //设置缓存名为zgg,内容为zongguagua,有效时间60秒 cache('zgg',"zongguagua",60); //读取缓存 if(cach ...
- Springmvc+Shiro实战
原文链接:http://blog.csdn.net/qq_37936542/article/details/79010449 springmvc+shiro实现系统粗细粒度的权限管理步骤: 1:表格设 ...
- 【u126】矩形
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 给出一个n*n的矩阵,矩阵中,有些格子被染成黑色,有些格子被染成黑色,现要求矩阵中白色矩形的数量. [ ...