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 ...
随机推荐
- C# .NET Socket
C# .NET Socket 简单实用框架 背景: 首先向各位前辈,大哥哥小姐姐问一声好~ 这是我第一次写博客,目前为一个即将步入大四的学生,上学期在一家公司实习了半年,后期发现没有动力,而且由于薪水 ...
- inflate, findViewById与setContentView的区别与联系 分类： H1_ANDROID 2014-04-18 22:54 1119人阅读 评论(0) 收藏
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...
- sourceinsight4
转载 http://bbs.pediy.com/thread-215669.htm 如果你觉得软件有用,请购买正版.发布这个纯属娱乐. 转载请注明出处,谢谢! 仅修改了程序中用于License签名验证 ...
- 【C#】万事开头难（二）<机房重构>
前言 机房将要进行完了,之所以仍然使用这个题目,是由于我想告诉自己.无论面对多么未知的事物.不要害怕,去做就好.在这么多天的机房重构中,发现了好多问题,也攻克了好多问题,今天,就把我解决的问题分享给大 ...
- [Angular] FormBuildAPI
Using FormBuilder API can simply our code, for example we want to refactor following code by using F ...
- php如何实现读取网易有道词典输出单词的xml格式并且转化为html形式
php实现读取网易有道词典输出单词的xml格式并且转化为html形式 一.总结 一句话总结:将xml中的文件用preg_match_all读出来,然后组合成想要的数据 1.explode除了爆炸的意思 ...
- Thrift写RPC接口
Thrift总结(二)创建RPC服务 前面介绍了thrift 基础的东西,怎么写thrift 语法规范编写脚本,如何生成相关的语言的接口.不清楚的可以看这个<Thrift总结(一)介绍>. ...
- 小米再迎两位重量级人才,原亦庄国投CEO王晓波入职产投部（产业嗅觉）
集微网消息,在小米进入上市倒计时阶段,雷军继续在产业链吸纳人才.日前,小米又迎来了两位重量级人才. 一位投资界重量级人才王晓波,他曾任著名产业投资基金亦庄国投总经理.据悉,王晓波加入的部门是小米产投部 ...
- 【codeforces 768A】Oath of the Night's Watch
[题目链接]:http://codeforces.com/contest/768/problem/A [题意] 让你统计这样的数字x的个数; x要满足有严格比它小和严格比它大的数字; [题解] 排个序 ...
- HDU 树型dp
HDU 4123 Bob's Race 题意:定义每个点的值为它到树上最远点的距离,每次询问q,回答最长的极值差小于等于q且编号连续的一段点的长度. 题解:求距离两次dp,求极值ST表+尺取法. HD ...