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

评论

3 楼 風一樣的男子 2009-09-06  

JFreeChart 用过
不过现在公司都改用 Flex 了

2 楼 kongshanxuelin 2009-08-12  

jkfzero 写道

Flex不是也有图表插件么？或者购买FusionChart也行。
Google很早之前用过，中文貌似有点问题不过瑕不掩瑜。
JFreeChart感觉生成的图表有点死板，代码量还多。

所以要封装一下，使用起来照样很方便的：）

1 楼 jkfzero 2009-08-11  

Flex不是也有图表插件么？或者购买FusionChart也行。
Google很早之前用过，中文貌似有点问题不过瑕不掩瑜。
JFreeChart感觉生成的图表有点死板，代码量还多。