使用ichartjs生成图表
官网：http://www.ichartjs.com/
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
ichartjs 对新手是十分友好的，它的强大之处在于可以根据需要自动生成图表，然后你只需要将数据绑定就可以了。所以，对于新手来说，不需要你深入了解和学习，只需要绑定数据就可以了。
例子：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增会员分析</title> <%
String basePath = request.getContextPath();
//验证session，防止直接进入该页面
Object obj = request.getSession().getAttribute("current");//获取session对象
if(obj == null) {
response.sendRedirect("../z_login.jsp");
}
%>
<script type="text/javascript" src="../ichartjs/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="../jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<link rel="shortcut icon" href="img/logo1.jpg"/>
<link type="text/css" rel="stylesheet"
href="../jquery-easyui-1.5.1/themes/icon.css"></link>
<link type="text/css" rel="stylesheet"
href="../jquery-easyui-1.5.1/themes/default/easyui.css"></link>
<script type="text/javascript"
src="../jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script> <style type="text/css"> *{margin:0;padding:0} .anal{
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<a id="analyear" class="anal" href="#">根据年份查询</a><br>
<a id="analmon" class="anal" href="#">根据月份查询</a><br> <div id='ichart-render'></div>
</body>
</html>
<script>
$(function() { $("#analmon").click(function() {
$.ajax({
type : "post",
url : "../useranal/analmon.do",
dataType : "json",//返回的
success : function(data) {
for(var i in data.rows.baifenbi){
alert(i);
}
var chart = iChart.create({
render:"ichart-render",
width:800,
height:400,
background_color:"#fefefe",
gradient:false,
color_factor:0.2,
border:{
color:"BCBCBC",
width:1
},
align:"center",
offsetx:0,
offsety:0,
sub_option:{
border:{
color:"#BCBCBC",
width:1
},
label:{
fontweight:500,
fontsize:11,
color:"#4572a7",
sign:"square",
sign_size:12,
border:{
color:"#BCBCBC",
width:1
},
background_color:"#fefefe"
}
},
shadow:true,
shadow_color:"#666666",
shadow_blur:2,
showpercent:false,
column_width:"70%",
bar_height:"70%",
radius:"90%",
title:{
text:"新增会员分析",
color:"#111111",
fontsize:20,
font:"微软雅黑",
textAlign:"center",
height:30,
offsetx:0,
offsety:0
},
subtitle:{
text:"月新增会员分析",
color:"#111111",
fontsize:16,
font:"微软雅黑",
textAlign:"left",
height:20,
offsetx:0,
offsety:0
},
footnote:{
text:"",
color:"#111111",
fontsize:12,
font:"微软雅黑",
textAlign:"right",
height:20,
offsetx:0,
offsety:0
},
legend:{
enable:false,
background_color:"#fefefe",
color:"#333333",
fontsize:12,
border:{
color:"#BCBCBC",
width:1
},
column:1,
align:"right",
valign:"center",
offsetx:0,
offsety:0
},
coordinate:{
width:"80%",
height:"84%",
background_color:"#ffffff",
axis:{
color:"#a5acb8",
width:[1,"",1,""]
},
grid_color:"#d9d9d9",
label:{
fontweight:500,
color:"#666666",
fontsize:11
}
},
label:{
fontweight:500,
color:"#666666",
fontsize:11
},
type:"column2d", data:data.rows,
});
chart.draw(); },
error : function(msg) {
cosole.log(msg);
}
});
}); $("#analyear").click(function() {
$.ajax({
type : "post",
url : "../useranal/analyear.do",
dataType : "json",//返回的
success : function(data) {
for(var i in data.rows.baifenbi){
alert(i);
}
var chart = iChart.create({
render:"ichart-render",
width:800,
height:400,
background_color:"#fefefe",
gradient:false,
color_factor:0.2,
border:{
color:"BCBCBC",
width:1
},
align:"center",
offsetx:0,
offsety:0,
sub_option:{
border:{
color:"#BCBCBC",
width:1
},
label:{
fontweight:500,
fontsize:11,
color:"#4572a7",
sign:"square",
sign_size:12,
border:{
color:"#BCBCBC",
width:1
},
background_color:"#fefefe"
}
},
shadow:true,
shadow_color:"#666666",
shadow_blur:2,
showpercent:false,
column_width:"70%",
bar_height:"70%",
radius:"90%",
title:{
text:"新增会员分析",
color:"#111111",
fontsize:20,
font:"微软雅黑",
textAlign:"center",
height:30,
offsetx:0,
offsety:0
},
subtitle:{
text:"年新增会员分析",
color:"#111111",
fontsize:16,
font:"微软雅黑",
textAlign:"left",
height:20,
offsetx:0,
offsety:0
},
footnote:{
text:"",
color:"#111111",
fontsize:12,
font:"微软雅黑",
textAlign:"right",
height:20,
offsetx:0,
offsety:0
},
legend:{
enable:false,
background_color:"#fefefe",
color:"#333333",
fontsize:12,
border:{
color:"#BCBCBC",
width:1
},
column:1,
align:"right",
valign:"center",
offsetx:0,
offsety:0
},
coordinate:{
width:"80%",
height:"84%",
background_color:"#ffffff",
axis:{
color:"#a5acb8",
width:[1,"",1,""]
},
grid_color:"#d9d9d9",
label:{
fontweight:500,
color:"#666666",
fontsize:11
}
},
label:{
fontweight:500,
color:"#666666",
fontsize:11
},
type:"column2d", data:data.rows,
});
chart.draw(); },
error : function(msg) {
cosole.log(msg);
}
});
}); });
</script>
后台代码：
/*
* 查询月增会员
*/
@ResponseBody
@RequestMapping("/analmon")
public JSONObject AnalMon() {
JSONObject jo = new JSONObject();
List<Anal> list=useranalservice.AnalMon();
for(Anal a:list){
a.setColor("#"+Color.getRandColorCode());
}
jo.put("rows", list);
return jo;
}
Sql语句：
<!-- 根据月份查询新增会员 -->
<select id="AnalMon" resultType="Anal">
select to_char(cu.createtime, 'yyyy-mm') name, count(*) value
from (select u.*
from CRM_USERS u
) cu
group by to_char(cu.createtime, 'yyyy-mm')
order by to_char(cu.createtime, 'yyyy-mm') </select>
实体类：
package com.hanqi.model;
public class Anal {
private String name;
private String value;
private String color;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public Anal() {
super();
// TODO Auto-generated constructor stub
}
public Anal(String name, String value, String color) {
super();
this.name = name;
this.value = value;
this.color = color;
}
@Override
public String toString() {
return "Anal [name=" + name + ", value=" + value + ", color=" + color + "]";
}
}
不过，ichartjs这样使用也有一个很大的问题，如果数据太多，展示的时候会很难看，而且目前这种方式只能生成柱状图和饼图。
要解决这两个问题，第一个问题可以尝试在查询数据的时候进行判断，限制用户查询太多的数据，并给出相应的提示。
第二个问题就需要深入的了解并学习iChatjs来自己生成图表了。
使用ichartjs生成图表的更多相关文章
- 关于使用FusionCharts生成图表时出现invalid xml data错误提示的解决方法
FusionCharts的确功能是够强大的.收集的功能估计更强大.在初次使用时,对着手册,一步一步操作,就是生成图表工具不成功.一直报"Invalid xml data"错误.后面 ...
- [转] C#操作EXCEL,生成图表的全面应用
gailzhao 原文 关于C#操作EXCEL,生成图表的全面应用 近来我在开发一个运用C#生成EXCEL文档的程序,其中要根据数据生成相应的图表,该图表对颜色和格式都有严格的要求,在百度和谷歌中搜索 ...
- 使用gnuplot对tpcc-mysql压测结果生成图表
tpcc-mysql的安装:http://www.cnblogs.com/lizhi221/p/6814003.html tpcc-mysql的使用:http://www.cnblogs.com/li ...
- python xlsxwriter库生成图表的应用
xlsxwriter可能用过的人并不是很多,不过使用后就会感觉,他的功能让你叹服,除了可以按要求生成你所需要的excel外 还可以加上很形象的各种图,比如柱状图.饼图.折线图等. 请看本人生成的: 这 ...
- PHP生成图表pChart
pChart是一个开源的图表生成库,主要涉及3个Class:pChart.class, pData.class, pCache.class,可生成20多种简单或复杂的图表,支持PNG,JPG,GIF通 ...
- [经验总结] 从其它sheet页引用数据生成图表时没有图例的解决办法
1.先给出一个在有数据区域的sheet页中生成的图表,比较全,图表和图例全部都有,如下图: 2.但是如果在其它 sheet页中引用该有数据的sheet数据时并生成图表,生成的图表只有图表区域显示,图例 ...
- 使用PowerDesigner 15对现有数据库进行生成图表结构
PowerDesigner的安装和基本使用,我就不阐述了.大家可以到这里看看:http://www.blogjava.net/wangdetian168/archive/2011/04/07/Powe ...
- python写入excel(xlswriter)--生成图表
一.折线图: # -*- coding:utf-8 -*- import xlsxwriter # 创建一个excel workbook = xlsxwriter.Workbook("cha ...
- Tpcc-MySQL对mysql数据库进行性能测试报告、分析及使用gnuplot生成图表展示
TPC-C是专门针对联机交易处理系统(OLTP系统)的规范,一般情况下我们也把这类系统称为业务处理系统. tpcc-mysql是percona基于TPC-C(下面简写成TPCC)衍生出来的产品,专用于 ...
随机推荐
- Pagination(分页) 从前台到后端总结
一:效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 回到顶部(go to top) 二:上代码前的一些知识 ...
- IOS SDWebImage实现基本原理详解（转载）
1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如果有则直接 ...
- AngularJS -- Bootstrap(启动器)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...
- bzoj2330（差分约束）
题解:这道题是练差分约束的一道好题目吧,我具体在代码中注释,这样更加好理解, 为什么求最长路呢?因为这样保证了满足条件,如果存在正权环,就表示无解,就是 正权环之间不断要更多的糖果才行. #inclu ...
- 简单Elixir游戏服务器开篇
以前的Elixir游戏服设计系列种种原因没有完成. 后来虽然用Elixir + riak 完成了一个麻将的初始版本,可惜公司也挂了. 现在到新公司,比较空闲,想着像完成一个心愿一样,还是重启下吧(希望 ...
- IPSec协议
IPSec协议:IPsec将IP数据包的内容先加密再传输,即便中途被截获,由于缺乏解密数据包所必要的密钥,攻击者也无法获取里面的内容. 传输模式和隧道模式:IPsec对数据进行加密的方式有两种:传输模 ...
- zookeeper curator选主(Leader)
在分布式系统设计中,选主是一个常见的场景.选主是一个这样的过程,通过选主,主节点被选择出来控制其他节点或者是分配任务. 选主算法要满足的几个特征: 1)各个节点均衡的获得成为主节点的权利,一旦主节点被 ...
- MySql5.7创建数据库与添加用户、删除用户及授权
MySql安装启动成功后(不会的可以查看上篇MySql5.7安装及配置),首先我们需要创建数据库,然后创建一个用户去操作这个数据库: 一.创建数据库 在MySql命令行中输入: create data ...
- Codeforces A. Trip For Meal
A. Trip For Meal time limit per test 1 second memory limit per test 512 megabytes input standard inp ...
- javaScript 设计模式系列之四：组合模式
介绍 组合模式(Composite Pattern):组合多个对象形成树形结构以表示具有"整体-部分"关系的层次结构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用 ...