点击这里给我发消息 点击这里给我发消息
首页 > 行业资讯 > HTML>详细内容

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

添加时间:2013-12-6
    相关阅读: 开发 页面 数据库 SQL
一般来说,实现方式有很多种,可参考的实现:

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

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

  最终的效果如图:

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

  页面放置的代码如下:

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

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册