创意柱状图

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

2.简单的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2

<html>
3

<head>
4

<title>Test</title>
6

</head>
7

<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"> </font></td>
15

<td width="42"> </td>
16

<td width="16"> </td>
17

<td width="41"> </td>
18

<td width="17"> </td>
19

<td width="42"> </td>
20

<td width="17"> </td>
21

<td width="39"> </td>
22

</tr>
23

<tr>
24

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
25

<td> </td>
26

<td> </td>
27

<td> </td>
28

<td bgcolor="#33CCFF"> </td>
29

<td> </td>
30

<td> </td>
31

<td> </td>
32

</tr>
33

<tr>
34

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
35

<td> </td>
36

<td> </td>
37

<td> </td>
38

<td bgcolor="#33CCFF"> </td>
39

<td> </td>
40

<td> </td>
41

<td> </td>
42

</tr>
43

<tr>
44

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
45

<td> </td>
46

<td bgcolor="#000000"> </td>
47

<td> </td>
48

<td bgcolor="#33CCFF"> </td>
49

<td> </td>
50

<td> </td>
51

<td> </td>
52

</tr>
53

<tr>
54

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
55

<td> </td>
56

<td bgcolor="#000000"> </td>
57

<td> </td>
58

<td bgcolor="#33CCFF"> </td>
59

<td> </td>
60

<td bgcolor="#FF9933"> </td>
61

<td> </td>
62

</tr>
63

<tr>
64

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
65

<td> </td>
66

<td bgcolor="#000000"> </td>
67

<td> </td>
68

<td bgcolor="#33CCFF"> </td>
69

<td> </td>
70

<td bgcolor="#FF9933"> </td>
71

<td> </td>
72

</tr>
73

<tr>
74

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
75

<td> </td>
76

<td bgcolor="#000000"> </td>
77

<td> </td>
78

<td bgcolor="#33CCFF"> </td>
79

<td> </td>
80

<td bgcolor="#FF9933"> </td>
81

<td> </td>
82

</tr>
83

<tr>
84

<td nowrap bgcolor="#FF0000"><font color="#FFFFFF"> </font></td>
85

<td> </td>
86

<td bgcolor="#000000"> </td>
87

<td> </td>
88

<td bgcolor="#33CCFF"> </td>
89

<td> </td>
90

<td bgcolor="#FF9933"> </td>
91

<td> </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 阅读(3782) 评论(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

有一点点难看啊...太空了回复更多评论

新用户注册刷新评论列表


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




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: 【转载】神奇的css属性pointer-events IE 6下双倍margin的BUG 【转载】IE中的条件注释【转载】HTML文档中小meta的大作用 IE 6下处理固定定位的问题利用字体将数字表现为图案效果 CSS 做个图片水印效果 javascript 取消文字选择区 web 颜色选择器 setTimeout为0的应用

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

积分与排名

最新评论