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


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

  利用Google Chart API,非常方便,只是你受限制将会很多,通过Google的License Key访问Google提供的图表API即可

  基于JFreeChart的实现,这也是我的实现方式

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

  Html代码  

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

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

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

  一个Servlet,通过封装的JFreeChart操作来实现图形输出

  一个数据库表,用于保存id对应的图形对象,我的表是这样的:

  Sql代码   

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格式封装 
)

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

  最终的效果如图:

  页面放置的代码如下:

  Html代码   

  <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" />



相关阅读:
在JSP中访问Oracle数据库
准备好升级你的Exchange 2003
连续滚动的超级链接文字网页代码
为你的网站增加亮点的9款jQuery插件推荐
linux ssh 升级安装方法
Oracle基础:bean的属性类型
JS.Class - 2. Methods & Types
设计视图中允许的九种数据类型
一直都需要的复制到系统剪贴板之IE,firefox兼容版
JavaServer Page(JSP)简介
数据字典表Truncate掉将导致数据库不可用
javascript asp教程 日期相关
Javascript 模式实例 观察者模式
JavaScript面向对象的两种书写方法以及差别
快速导航

Copyright © 2016 phpStudy |