官网：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:0
  107.                              },
  108.                              subtitle:{
  109.                                    text:"月新增会员分析",
  110.                                    color:"#111111",
  111.                                    fontsize:16,
  112.                                    font:"微软雅黑",
  113.                                    textAlign:"left",
  114.                                    height:20,
  115.                                    offsetx:0,
  116.                                    offsety:0
  117.                              },
  118.                              footnote:{
  119.                                    text:"",
  120.                                    color:"#111111",
  121.                                    fontsize:12,
  122.                                    font:"微软雅黑",
  123.                                    textAlign:"right",
  124.                                    height:20,
  125.                                    offsetx:0,
  126.                                    offsety:0
  127.                              },
  128.                              legend:{
  129.                                    enable:false,
  130.                                    background_color:"#fefefe",
  131.                                    color:"#333333",
  132.                                    fontsize:12,
  133.                                    border:{
  134.                                          color:"#BCBCBC",
  135.                                          width:1
  136.                                    },
  137.                                    column:1,
  138.                                    align:"right",
  139.                                    valign:"center",
  140.                                    offsetx:0,
  141.                                    offsety:0
  142.                              },
  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:11
  156.                                    }
  157.                              },
  158.                              label:{
  159.                                    fontweight:500,
  160.                                    color:"#666666",
  161.                                    fontsize:11
  162.                              },
  163.                              type:"column2d",
  164.  
  165.                              data:data.rows,
  166.                        });
  167.                        chart.draw();
  168.  
  169.                  },
  170.                  error : function(msg) {
  171.                      cosole.log(msg);
  172.                  }
  173.              });
  174.          });
  175.  
  176.          $("#analyear").click(function() {
  177.              $.ajax({
  178.                  type : "post",
  179.                  url : "../useranal/analyear.do",
  180.                  dataType : "json",//返回的
  181.                  success : function(data) {
  182.                      for(var i in data.rows.baifenbi){
  183.                          alert(i);
  184.                      }
  185.                       var chart = iChart.create({
  186.                              render:"ichart-render",
  187.                              width:800,
  188.                              height:400,
  189.                              background_color:"#fefefe",
  190.                              gradient:false,
  191.                              color_factor:0.2,
  192.                              border:{
  193.                                    color:"BCBCBC",
  194.                                    width:1
  195.                              },
  196.                              align:"center",
  197.                              offsetx:0,
  198.                              offsety:0,
  199.                              sub_option:{
  200.                                    border:{
  201.                                          color:"#BCBCBC",
  202.                                          width:1
  203.                                    },
  204.                                    label:{
  205.                                          fontweight:500,
  206.                                          fontsize:11,
  207.                                          color:"#4572a7",
  208.                                          sign:"square",
  209.                                          sign_size:12,
  210.                                          border:{
  211.                                                color:"#BCBCBC",
  212.                                                width:1
  213.                                          },
  214.                                          background_color:"#fefefe"
  215.                                    }
  216.                              },
  217.                              shadow:true,
  218.                              shadow_color:"#666666",
  219.                              shadow_blur:2,
  220.                              showpercent:false,
  221.                              column_width:"70%",
  222.                              bar_height:"70%",
  223.                              radius:"90%",
  224.                              title:{
  225.                                    text:"新增会员分析",
  226.                                    color:"#111111",
  227.                                    fontsize:20,
  228.                                    font:"微软雅黑",
  229.                                    textAlign:"center",
  230.                                    height:30,
  231.                                    offsetx:0,
  232.                                    offsety:0
  233.                              },
  234.                              subtitle:{
  235.                                    text:"年新增会员分析",
  236.                                    color:"#111111",
  237.                                    fontsize:16,
  238.                                    font:"微软雅黑",
  239.                                    textAlign:"left",
  240.                                    height:20,
  241.                                    offsetx:0,
  242.                                    offsety:0
  243.                              },
  244.                              footnote:{
  245.                                    text:"",
  246.                                    color:"#111111",
  247.                                    fontsize:12,
  248.                                    font:"微软雅黑",
  249.                                    textAlign:"right",
  250.                                    height:20,
  251.                                    offsetx:0,
  252.                                    offsety:0
  253.                              },
  254.                              legend:{
  255.                                    enable:false,
  256.                                    background_color:"#fefefe",
  257.                                    color:"#333333",
  258.                                    fontsize:12,
  259.                                    border:{
  260.                                          color:"#BCBCBC",
  261.                                          width:1
  262.                                    },
  263.                                    column:1,
  264.                                    align:"right",
  265.                                    valign:"center",
  266.                                    offsetx:0,
  267.                                    offsety:0
  268.                              },
  269.                              coordinate:{
  270.                                    width:"80%",
  271.                                    height:"84%",
  272.                                    background_color:"#ffffff",
  273.                                    axis:{
  274.                                          color:"#a5acb8",
  275.                                          width:[1,"",1,""]
  276.                                    },
  277.                                    grid_color:"#d9d9d9",
  278.                                    label:{
  279.                                          fontweight:500,
  280.                                          color:"#666666",
  281.                                          fontsize:11
  282.                                    }
  283.                              },
  284.                              label:{
  285.                                    fontweight:500,
  286.                                    color:"#666666",
  287.                                    fontsize:11
  288.                              },
  289.                              type:"column2d",
  290.  
  291.                              data:data.rows,
  292.                        });
  293.                        chart.draw();
  294.  
  295.                  },
  296.                  error : function(msg) {
  297.                      cosole.log(msg);
  298.                  }
  299.              });
  300.          });
  301.  
  302.      });
  303.  </script>

后台代码：

  1.      /*
  2.       * 查询月增会员
  3.       */
  4.      @ResponseBody
  5.      @RequestMapping("/analmon")
  6.      public JSONObject AnalMon() {
  7.          JSONObject jo = new JSONObject();
  8.          List<Anal> list=useranalservice.AnalMon();
  9.          for(Anal a:list){
  10.              a.setColor("#"+Color.getRandColorCode());
  11.          }
  12.  
  13.          jo.put("rows", list);
  14.          return jo;
  15.      }

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 stub
  28.      }
  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.      @Override
  36.      public String toString() {
  37.          return "Anal [name=" + name + ", value=" + value + ", color=" + color + "]";
  38.      }
  39.  
  40.  }

不过，ichartjs这样使用也有一个很大的问题，如果数据太多，展示的时候会很难看，而且目前这种方式只能生成柱状图和饼图。

要解决这两个问题，第一个问题可以尝试在查询数据的时候进行判断，限制用户查询太多的数据，并给出相应的提示。

第二个问题就需要深入的了解并学习iChatjs来自己生成图表了。

使用ichartjs生成图表的更多相关文章

  1. 关于使用FusionCharts生成图表时出现invalid xml data错误提示的解决方法

    FusionCharts的确功能是够强大的.收集的功能估计更强大.在初次使用时,对着手册,一步一步操作,就是生成图表工具不成功.一直报"Invalid xml data"错误.后面 ...

  2. [转] C#操作EXCEL,生成图表的全面应用

    gailzhao 原文 关于C#操作EXCEL,生成图表的全面应用 近来我在开发一个运用C#生成EXCEL文档的程序,其中要根据数据生成相应的图表,该图表对颜色和格式都有严格的要求,在百度和谷歌中搜索 ...

  3. 使用gnuplot对tpcc-mysql压测结果生成图表

    tpcc-mysql的安装:http://www.cnblogs.com/lizhi221/p/6814003.html tpcc-mysql的使用:http://www.cnblogs.com/li ...

  4. python xlsxwriter库生成图表的应用

    xlsxwriter可能用过的人并不是很多,不过使用后就会感觉,他的功能让你叹服,除了可以按要求生成你所需要的excel外 还可以加上很形象的各种图,比如柱状图.饼图.折线图等. 请看本人生成的: 这 ...

  5. PHP生成图表pChart

    pChart是一个开源的图表生成库,主要涉及3个Class:pChart.class, pData.class, pCache.class,可生成20多种简单或复杂的图表,支持PNG,JPG,GIF通 ...

  6. [经验总结] 从其它sheet页引用数据生成图表时没有图例的解决办法

    1.先给出一个在有数据区域的sheet页中生成的图表,比较全,图表和图例全部都有,如下图: 2.但是如果在其它 sheet页中引用该有数据的sheet数据时并生成图表,生成的图表只有图表区域显示,图例 ...

  7. 使用PowerDesigner 15对现有数据库进行生成图表结构

    PowerDesigner的安装和基本使用,我就不阐述了.大家可以到这里看看:http://www.blogjava.net/wangdetian168/archive/2011/04/07/Powe ...

  8. python写入excel(xlswriter)--生成图表

    一.折线图: # -*- coding:utf-8 -*- import xlsxwriter # 创建一个excel workbook = xlsxwriter.Workbook("cha ...

  9. Tpcc-MySQL对mysql数据库进行性能测试报告、分析及使用gnuplot生成图表展示

    TPC-C是专门针对联机交易处理系统(OLTP系统)的规范,一般情况下我们也把这类系统称为业务处理系统. tpcc-mysql是percona基于TPC-C(下面简写成TPCC)衍生出来的产品,专用于 ...

随机推荐

  1. java 线程二

    一.线程的优先级别 线程优先级别的使用范例: 1 package cn.galc.test; 2 3 public class TestThread6 { 4 public static void m ...

  2. 基于React Native的移动平台研发实践分享

    转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...

  3. iOS根据域名获取ip地址

    引入头文件 #include <netdb.h> #include <sys/socket.h> #include <arpa/inet.h> //根据域名获取ip ...

  4. struts2一个和多个文件上传及下载

    struts2的文件上传相比我们自己利用第三方jar包(commons-fileupload-1.2.1.jar   commons-io-1.3.2.jar )要简单的多,当然struts2里面也是 ...

  5. ThinkPHP中：用户登录权限验证类

    使用CommonAction.class.php公共类,统一判断用户是否登录 <?php //后台登录页 Class CommonAction extends Action{ //后台登录页面 ...

  6. java集合系列——java集合概述（一）

    在JDK中集合是很重要的,学习java那么一定要好好的去了解一下集合的源码以及一些集合实现的思想! 一:集合的UML类图(网上下载的图片) Java集合工具包位置是java.util.* 二:集合工具 ...

  7. 调用惯例Calling Convention （或者说：调用约定）

    调用惯例影响执行效率,参数的传递方式以及栈清除的方式.   调用惯例 参数传递顺序 谁负责清除参数 参数是否使用暂存器 register 从左到右 被调用者 是 pascal 从左到右 被调用者 否 ...

  8. Conscription poj3723（最大生成树）

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6870   Accepted: 2361 Desc ...

  9. [js高手之路] html5 canvas动画教程 - 匀速运动

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  10. SQLServer中SQL语句与可执行二进制语句

    SQLServer可以执行正常SQL语句也可以执行被转换的二进制语句,一般会用此方法进行数据库注入操作,骗过基本的字符过滤 --将二进制格式转为普通SQL语句 ) = 0x53454C45435420 ...