Web开发中快速实现图形展现探讨

一般来说，实现方式有很多种，可参考的实现：

1. 利用Google Chart API，非常方便，只是你受限制将会很多，通过Google的License Key访问Google提供的图表API即可
2. 基于JFreeChart的实现，这也是我的实现方式

实现目标：在页面插入类似：

<img src="/salt/chart?id=1" usemap="#map0"/>

 如上语句即可实现图形展现，支持常用的：饼图，柱状图，仪表盘和折线图，并支持热点定义

 

我是通过这样的思路实现的：

1. 一个Servlet，通过封装的JFreeChart操作来实现图形输出
2. 一个数据库表，用于保存id对应的图形对象，我的表是这样的：

   create table T_CHARTSTAT
   (
     ID        VARCHAR2(32) not null,
     TITLE     VARCHAR2(255), --图形标题
     XLABEL    VARCHAR2(64),  --横坐标
     YLABEL    VARCHAR2(64),  --纵坐标
     SQL       VARCHAR2(4000),  --执行统计的SQL语句
     DISP      VARCHAR2(255),  
     W         NUMBER(3) default 350, --图形宽
     H         NUMBER(3) default 450,  --图形高 
     CHARTTYPE VARCHAR2(5) default 'bar', --图形类型
     ARGS      VARCHAR2(4000) default '{}'  --其他参数，用JSON格式封装
   )

3. 在页面放入类似以上语句即可实现图形展现

最终的效果如图：

 

页面放置的代码如下：

   <img src="/salt/chart?id=1" usemap="#map0"/>
   <img src="/salt/chart?id=2" usemap="#map1"/>
   <img src="/salt/chart?id=3" usemap="#map2"/>
   <img src="/salt/chart?id=4" />

 

在线演示地址：http://code.faqee.com/charttest.jsp