创意柱状图

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

2.简单的代码:

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


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值