本来页面上是用jfreechart 绘制的数据分析图。但是由于有个页面绘制的图比较多,而且是js选择性的展示哪张图,头说都用jfreechart效率太慢了,把那简单的柱状图,拿去改改(用简单点,而且不怎么占资源的方式)。我反复思量,反复研究,终于搞出个小东西。虽然没有什么技术含量,但是却觉得自己很有创意。全部都是用最简单的HTML 元素制作的,分享下:
1.效果截图

2.简单的代码:

  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2<html>
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5<title>Test</title>
  6</head>
  7
  8<body>
  9<table border=0 cellpadding=0 cellspacing=0>
 10<tr>
 11<td width=1 height=200 bgcolor=red></td>
 12<td width=250><table width="245" border="0" cellspacing="0" align="right"  >
 13  <tr> 
 14    <td width="15" nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 15    <td width="42">&nbsp;</td>
 16    <td width="16">&nbsp;</td>
 17    <td width="41">&nbsp;</td>
 18    <td width="17">&nbsp;</td>
 19    <td width="42">&nbsp;</td>
 20    <td width="17">&nbsp;</td>
 21    <td width="39">&nbsp;</td>
 22  </tr>
 23  <tr> 
 24    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 25    <td>&nbsp;</td>
 26    <td>&nbsp;</td>
 27    <td>&nbsp;</td>
 28    <td bgcolor="#33CCFF">&nbsp;</td>
 29    <td>&nbsp;</td>
 30    <td>&nbsp;</td>
 31    <td>&nbsp;</td>
 32  </tr>
 33  <tr> 
 34    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 35    <td>&nbsp;</td>
 36    <td>&nbsp;</td>
 37    <td>&nbsp;</td>
 38    <td bgcolor="#33CCFF">&nbsp;</td>
 39    <td>&nbsp;</td>
 40    <td>&nbsp;</td>
 41    <td>&nbsp;</td>
 42  </tr>
 43  <tr> 
 44    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 45    <td>&nbsp;</td>
 46    <td bgcolor="#000000">&nbsp;</td>
 47    <td>&nbsp;</td>
 48    <td bgcolor="#33CCFF">&nbsp;</td>
 49    <td>&nbsp;</td>
 50    <td>&nbsp;</td>
 51    <td>&nbsp;</td>
 52  </tr>
 53  <tr> 
 54    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 55    <td>&nbsp;</td>
 56    <td bgcolor="#000000">&nbsp;</td>
 57    <td>&nbsp;</td>
 58    <td bgcolor="#33CCFF">&nbsp;</td>
 59    <td>&nbsp;</td>
 60    <td bgcolor="#FF9933">&nbsp;</td>
 61    <td>&nbsp;</td>
 62  </tr>
 63  <tr> 
 64    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 65    <td>&nbsp;</td>
 66    <td bgcolor="#000000">&nbsp;</td>
 67    <td>&nbsp;</td>
 68    <td bgcolor="#33CCFF">&nbsp;</td>
 69    <td>&nbsp;</td>
 70    <td bgcolor="#FF9933">&nbsp;</td>
 71    <td>&nbsp;</td>
 72  </tr>
 73  <tr> 
 74    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 75    <td>&nbsp;</td>
 76    <td bgcolor="#000000">&nbsp;</td>
 77    <td>&nbsp;</td>
 78    <td bgcolor="#33CCFF">&nbsp;</td>
 79    <td>&nbsp;</td>
 80    <td bgcolor="#FF9933">&nbsp;</td>
 81    <td>&nbsp;</td>
 82  </tr>
 83  <tr> 
 84    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 85    <td>&nbsp;</td>
 86    <td bgcolor="#000000">&nbsp;</td>
 87    <td>&nbsp;</td>
 88    <td bgcolor="#33CCFF">&nbsp;</td>
 89    <td>&nbsp;</td>
 90    <td bgcolor="#FF9933">&nbsp;</td>
 91    <td>&nbsp;</td>
 92  </tr>
 93</table></td>
 94</tr>
 95<tr><td colspan=2 height=1 bgcolor=red></td><tr>
 96<table>  
 97</body>
 98</html>
 99
100


 

posted on 2007-04-20 23:39 -274°C 阅读(3605) 评论(5)  编辑  收藏 所属分类: web前端


FeedBack:
# re: 创意柱状图
2007-04-20 23:44 | 山风小子
有意思 :)  回复  更多评论
  
# re: 创意柱状图[未登录]
2007-04-20 23:55 | sooxin
能想到还是挺好  回复  更多评论
  
# re: 创意柱状图
2007-04-21 09:57 | 我为J狂
用什么工具画的,是dreamweaver吗?  回复  更多评论
  
# re: 创意柱状图[未登录]
2007-04-21 15:58 | sooxin
网页制作表格  回复  更多评论
  
# re: 创意柱状图
2007-06-30 16:08 | Alexander.Yu
有一点点难看啊...太空了  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 871668
  • 排名 - 37

最新评论