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 ...
随机推荐
- Win7的ftp功能
ftp作为文件传输协议,在一些特殊情况下用这种文件传输是比较方便的,并且win7本身也支持这个功能,在控制面板--->程序-->打开或关闭Windows功能,安装即可: 然后在管理控制台中 ...
- WordPress的后台功能菜单介绍与操作，WordPress后台说明
WordPress网站的后台概况和登陆地址 网站都有个后台管理系统,通过网站后台,你可以改变你的网站外观,管理你网站的数据,给网站前台增加页面,文章,视频,图片或者其他功能. 通过WordPress建 ...
- 搭建基于java环境
.net项目架构改造之搭建基于java环境配置一览[上] 最近公司做了一个项目,需要嵌套在千牛的客户端上,项目代码必须上阿里的聚石塔,全程采用基于docker的自动化部署,我们的项目是基于.net ...
- zzuli OJ 1128: 课程平均分
Description 期末考试结束,班主任拿到了本班学生的成绩汇总表.由m行n列组成(本班共同拥有m名学生,本学期有n门课程),每行是一个同学的n门课程成绩,请编敲代码,计算并输出每门课的平均分.结 ...
- ios 第一篇文章－xcode6.2键盘调不出来
ios 第一篇文章 不晓得有没有人遇到过ios代码内调用键盘(keyboard)调不出来的情况,反正我是遇到了,按官方文档的说法调用键盘事件非常easy事实上: 我用了之后,不晓得为嘛,键盘就是不显示 ...
- node转发formdata
router.post('/keUpload', checkLogin, setAccessControlAllow, (req, res, next) => { const busboy = ...
- Ajax详解及使用Ajax时的返回值类型有哪些？
Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...
- [React] Pass Data To Event Handlers with Partial Function Application
In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to ref ...
- hdu 4059 The Boss on Mars
The Boss on Mars Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Web开发标配--开发人员工具-F12
喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时 ...