创意柱状图

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

2.简单的代码:

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


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值