本来页面上是用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"> </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
<!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"> </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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
