官网：http://www.ichartjs.com/
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
ichartjs 对新手是十分友好的，它的强大之处在于可以根据需要自动生成图表，然后你只需要将数据绑定就可以了。所以，对于新手来说，不需要你深入了解和学习，只需要绑定数据就可以了。
例子：
?1 <%@ page language="java" contentType="text/html; charset=UTF-8" ?2 ????pageEncoding="UTF-8"%> ?3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> ?4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ?5 <html> ?6 <head> ?7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ?8 <title>新增会员分析</title> ?9 ?10 <% 11 String basePath = request.getContextPath(); 12 //验证session，防止直接进入该页面 13 Object obj = request.getSession().getAttribute("current");//获取session对象 14 if(obj == null) { 15 ????response.sendRedirect("../z_login.jsp"); 16 } ?17 %> 18 <script type="text/javascript" src="../ichartjs/ichart.1.2.1.min.js"></script> 19 <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> 20 <script type="text/javascript" 21 ????src="../jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 22 ????<link rel="shortcut icon" href="img/logo1.jpg"/> 23 <link type="text/css" rel="stylesheet" 24 ????href="../jquery-easyui-1.5.1/themes/icon.css"></link> 25 <link type="text/css" rel="stylesheet" 26 ????href="../jquery-easyui-1.5.1/themes/default/easyui.css"></link> 27 <script type="text/javascript" 28 ????src="../jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script> 29 ?????30 <style type="text/css"> 31 ?32 ????*{margin:0;padding:0} ?33 ?34 ????.anal{ 35 ????????text-decoration:none; 36 ????????color:black; 37 ????} 38 </style> 39 </head> 40 <body> 41 ????<a id="analyear" class="anal" href="#">根据年份查询</a><br> 42 ????<a id="analmon" class="anal" href="#">根据月份查询</a><br> 43 ?44 ????<div id=‘ichart-render‘></div> 45 </body> 46 </html> 47 <script> 48 ????$(function() { 49 ?????????50 ????????$("#analmon").click(function() { 51 ????????????$.ajax({ 52 ????????????????type : "post", 53 ????????????????url : "../useranal/analmon.do", 54 ????????????????dataType : "json",//返回的 55 ????????????????success : function(data) { 56 ????????????????????for(var i in data.rows.baifenbi){ 57 ????????????????????????alert(i); 58 ????????????????????} 59 ?????????????????????var chart = iChart.create({ 60 ????????????????????????????render:"ichart-render", 61 ????????????????????????????width:800, 62 ????????????????????????????height:400, 63 ????????????????????????????background_color:"#fefefe", 64 ????????????????????????????gradient:false, 65 ????????????????????????????color_factor:0.2, 66 ????????????????????????????border:{ 67 ??????????????????????????????????color:"BCBCBC", 68 ??????????????????????????????????width:1 69 ????????????????????????????}, 70 ????????????????????????????align:"center", 71 ????????????????????????????offsetx:0, 72 ????????????????????????????offsety:0, 73 ????????????????????????????sub_option:{ 74 ??????????????????????????????????border:{ 75 ????????????????????????????????????????color:"#BCBCBC", 76 ????????????????????????????????????????width:1 77 ??????????????????????????????????}, 78 ??????????????????????????????????label:{ 79 ????????????????????????????????????????fontweight:500, 80 ????????????????????????????????????????fontsize:11, 81 ????????????????????????????????????????color:"#4572a7", 82 ????????????????????????????????????????sign:"square", 83 ????????????????????????????????????????sign_size:12, 84 ????????????????????????????????????????border:{ 85 ??????????????????????????????????????????????color:"#BCBCBC", 86 ??????????????????????????????????????????????width:1 87 ????????????????????????????????????????}, 88 ????????????????????????????????????????background_color:"#fefefe" 89 ??????????????????????????????????} 90 ????????????????????????????}, 91 ????????????????????????????shadow:true, 92 ????????????????????????????shadow_color:"#666666", 93 ????????????????????????????shadow_blur:2, 94 ????????????????????????????showpercent:false, 95 ????????????????????????????column_width:"70%", 96 ????????????????????????????bar_height:"70%", 97 ????????????????????????????radius:"90%", 98 ????????????????????????????title:{ 99 ??????????????????????????????????text:"新增会员分析",100 ??????????????????????????????????color:"#111111",101 ??????????????????????????????????fontsize:20,102 ??????????????????????????????????font:"微软雅黑",103 ??????????????????????????????????textAlign:"center",104 ??????????????????????????????????height:30,105 ??????????????????????????????????offsetx:0,106 ??????????????????????????????????offsety:0107 ????????????????????????????},108 ????????????????????????????subtitle:{109 ??????????????????????????????????text:"月新增会员分析",110 ??????????????????????????????????color:"#111111",111 ??????????????????????????????????fontsize:16,112 ??????????????????????????????????font:"微软雅黑",113 ??????????????????????????????????textAlign:"left",114 ??????????????????????????????????height:20,115 ??????????????????????????????????offsetx:0,116 ??????????????????????????????????offsety:0117 ????????????????????????????},118 ????????????????????????????footnote:{119 ??????????????????????????????????text:"",120 ??????????????????????????????????color:"#111111",121 ??????????????????????????????????fontsize:12,122 ??????????????????????????????????font:"微软雅黑",123 ??????????????????????????????????textAlign:"right",124 ??????????????????????????????????height:20,125 ??????????????????????????????????offsetx:0,126 ??????????????????????????????????offsety:0127 ????????????????????????????},128 ????????????????????????????legend:{129 ??????????????????????????????????enable:false,130 ??????????????????????????????????background_color:"#fefefe",131 ??????????????????????????????????color:"#333333",132 ??????????????????????????????????fontsize:12,133 ??????????????????????????????????border:{134 ????????????????????????????????????????color:"#BCBCBC",135 ????????????????????????????????????????width:1136 ??????????????????????????????????},137 ??????????????????????????????????column:1,138 ??????????????????????????????????align:"right",139 ??????????????????????????????????valign:"center",140 ??????????????????????????????????offsetx:0,141 ??????????????????????????????????offsety:0142 ????????????????????????????},143 ????????????????????????????coordinate:{144 ??????????????????????????????????width:"80%",145 ??????????????????????????????????height:"84%",146 ??????????????????????????????????background_color:"#ffffff",147 ??????????????????????????????????axis:{148 ????????????????????????????????????????color:"#a5acb8",149 ????????????????????????????????????????width:[1,"",1,""]150 ??????????????????????????????????},151 ??????????????????????????????????grid_color:"#d9d9d9",152 ??????????????????????????????????label:{153 ????????????????????????????????????????fontweight:500,154 ????????????????????????????????????????color:"#666666",155 ????????????????????????????????????????fontsize:11156 ??????????????????????????????????}157 ????????????????????????????},158 ????????????????????????????label:{159 ??????????????????????????????????fontweight:500,160 ??????????????????????????????????color:"#666666",161 ??????????????????????????????????fontsize:11162 ????????????????????????????},163 ????????????????????????????type:"column2d",164 ????????????????????????????165 ????????????????????????????166 ????????????????????????????data:data.rows, ?167 ??????????????????????});168 ??????????????????????chart.draw();169 170 ????????????????},171 ????????????????error : function(msg) {172 ????????????????????cosole.log(msg);173 ????????????????}174 ????????????});175 ????????});176 177 ????????178 ????????$("#analyear").click(function() {179 ????????????$.ajax({180 ????????????????type : "post",181 ????????????????url : "../useranal/analyear.do",182 ????????????????dataType : "json",//返回的183 ????????????????success : function(data) {184 ????????????????????for(var i in data.rows.baifenbi){185 ????????????????????????alert(i);186 ????????????????????}187 ?????????????????????var chart = iChart.create({188 ????????????????????????????render:"ichart-render",189 ????????????????????????????width:800,190 ????????????????????????????height:400,191 ????????????????????????????background_color:"#fefefe",192 ????????????????????????????gradient:false,193 ????????????????????????????color_factor:0.2,194 ????????????????????????????border:{195 ??????????????????????????????????color:"BCBCBC",196 ??????????????????????????????????width:1197 ????????????????????????????},198 ????????????????????????????align:"center",199 ????????????????????????????offsetx:0,200 ????????????????????????????offsety:0,201 ????????????????????????????sub_option:{202 ??????????????????????????????????border:{203 ????????????????????????????????????????color:"#BCBCBC",204 ????????????????????????????????????????width:1205 ??????????????????????????????????},206 ??????????????????????????????????label:{207 ????????????????????????????????????????fontweight:500,208 ????????????????????????????????????????fontsize:11,209 ????????????????????????????????????????color:"#4572a7",210 ????????????????????????????????????????sign:"square",211 ????????????????????????????????????????sign_size:12,212 ????????????????????????????????????????border:{213 ??????????????????????????????????????????????color:"#BCBCBC",214 ??????????????????????????????????????????????width:1215 ????????????????????????????????????????},216 ????????????????????????????????????????background_color:"#fefefe"217 ??????????????????????????????????}218 ????????????????????????????},219 ????????????????????????????shadow:true,220 ????????????????????????????shadow_color:"#666666",221 ????????????????????????????shadow_blur:2,222 ????????????????????????????showpercent:false,223 ????????????????????????????column_width:"70%",224 ????????????????????????????bar_height:"70%",225 ????????????????????????????radius:"90%",226 ????????????????????????????title:{227 ??????????????????????????????????text:"新增会员分析",228 ??????????????????????????????????color:"#111111",229 ??????????????????????????????????fontsize:20,230 ??????????????????????????????????font:"微软雅黑",231 ??????????????????????????????????textAlign:"center",232 ??????????????????????????????????height:30,233 ??????????????????????????????????offsetx:0,234 ??????????????????????????????????offsety:0235 ????????????????????????????},236 ????????????????????????????subtitle:{237 ??????????????????????????????????text:"年新增会员分析",238 ??????????????????????????????????color:"#111111",239 ??????????????????????????????????fontsize:16,240 ??????????????????????????????????font:"微软雅黑",241 ??????????????????????????????????textAlign:"left",242 ??????????????????????????????????height:20,243 ??????????????????????????????????offsetx:0,244 ??????????????????????????????????offsety:0245 ????????????????????????????},246 ????????????????????????????footnote:{247 ??????????????????????????????????text:"",248 ??????????????????????????????????color:"#111111",249 ??????????????????????????????????fontsize:12,250 ??????????????????????????????????font:"微软雅黑",251 ??????????????????????????????????textAlign:"right",252 ??????????????????????????????????height:20,253 ??????????????????????????????????offsetx:0,254 ??????????????????????????????????offsety:0255 ????????????????????????????},256 ????????????????????????????legend:{257 ??????????????????????????????????enable:false,258 ??????????????????????????????????background_color:"#fefefe",259 ??????????????????????????????????color:"#333333",260 ??????????????????????????????????fontsize:12,261 ??????????????????????????????????border:{262 ????????????????????????????????????????color:"#BCBCBC",263 ????????????????????????????????????????width:1264 ??????????????????????????????????},265 ??????????????????????????????????column:1,266 ??????????????????????????????????align:"right",267 ??????????????????????????????????valign:"center",268 ??????????????????????????????????offsetx:0,269 ??????????????????????????????????offsety:0270 ????????????????????????????},271 ????????????????????????????coordinate:{272 ??????????????????????????????????width:"80%",273 ??????????????????????????????????height:"84%",274 ??????????????????????????????????background_color:"#ffffff",275 ??????????????????????????????????axis:{276 ????????????????????????????????????????color:"#a5acb8",277 ????????????????????????????????????????width:[1,"",1,""]278 ??????????????????????????????????},279 ??????????????????????????????????grid_color:"#d9d9d9",280 ??????????????????????????????????label:{281 ????????????????????????????????????????fontweight:500,282 ????????????????????????????????????????color:"#666666",283 ????????????????????????????????????????fontsize:11284 ??????????????????????????????????}285 ????????????????????????????},286 ????????????????????????????label:{287 ??????????????????????????????????fontweight:500,288 ??????????????????????????????????color:"#666666",289 ??????????????????????????????????fontsize:11290 ????????????????????????????},291 ????????????????????????????type:"column2d",292 ????????????????????????????293 ????????????????????????????294 ????????????????????????????data:data.rows, ?295 ??????????????????????});296 ??????????????????????chart.draw();297 298 ????????????????},299 ????????????????error : function(msg) {300 ????????????????????cosole.log(msg);301 ????????????????}302 ????????????});303 ????????});304 305 ????});306 </script>后台代码：
1 ?????2 ????/* 3 ?????* 查询月增会员 4 ?????*/ 5 ????@ResponseBody 6 ????@RequestMapping("/analmon") 7 ????public JSONObject AnalMon() { 8 ????????JSONObject jo = new JSONObject(); 9 ????????List<Anal> list=useranalservice.AnalMon();10 ????????for(Anal a:list){11 ????????????a.setColor("#"+Color.getRandColorCode());12 ????????}13 14 ????????jo.put("rows", list);15 ????????return jo;16 ????}Sql语句：
1 ????<!-- 根据月份查询新增会员 --> 2 ????<select id="AnalMon" resultType="Anal"> 3 ????????select to_char(cu.createtime, ‘yyyy-mm‘) name, count(*) value 4 ??????????from (select u.* 5 ??????????????????from CRM_USERS u 6 ????????????????) cu 7 ?????????group by to_char(cu.createtime, ‘yyyy-mm‘) 8 ?????????order by to_char(cu.createtime, ‘yyyy-mm‘) 9 10 ????</select>
实体类：
1 package com.hanqi.model; 2 ?3 public class Anal { 4 ????private String name; 5 ????private String value; 6 ????private String color; 7 ????public String getName() { 8 ????????return name; 9 ????}10 ????public void setName(String name) {11 ????????this.name = name;12 ????}13 ????public String getValue() {14 ????????return value;15 ????}16 ????public void setValue(String value) {17 ????????this.value = value;18 ????}19 ????public String getColor() {20 ????????return color;21 ????}22 ????public void setColor(String color) {23 ????????this.color = color;24 ????}25 ????public Anal() {26 ????????super();27 ????????// TODO Auto-generated constructor stub28 ????}29 ????public Anal(String name, String value, String color) {30 ????????super();31 ????????this.name = name;32 ????????this.value = value;33 ????????this.color = color;34 ????}35 ????@Override36 ????public String toString() {37 ????????return "Anal [name=" + name + ", value=" + value + ", color=" + color + "]";38 ????}39 ????40 ????41 }不过，ichartjs这样使用也有一个很大的问题，如果数据太多，展示的时候会很难看，而且目前这种方式只能生成柱状图和饼图。
要解决这两个问题，第一个问题可以尝试在查询数据的时候进行判断，限制用户查询太多的数据，并给出相应的提示。
第二个问题就需要深入的了解并学习iChatjs来自己生成图表了。
使用ichartjs生成图表
原文地址：http://www.cnblogs.com/jiangwz/p/7787594.html