創意柱狀圖

本來頁面上是用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 閱讀(3784) 評論(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

搜索

積分與排名

最新評論