本来页面上是用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![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
100
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
2
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
3
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
4
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
5
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
6
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
7
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
8
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
9
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
10
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
11
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
12
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
13
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
14
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
15
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
16
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
17
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
18
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
19
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
20
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
21
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
22
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
23
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
24
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
25
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
26
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
27
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
28
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
29
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
30
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
31
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
32
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
33
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
34
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
35
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
36
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
37
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
38
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
39
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
40
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
41
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
42
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
43
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
44
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
45
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
46
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
47
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
48
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
49
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
50
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
51
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
52
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
53
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
54
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
55
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
56
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
57
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
58
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
59
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
60
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
61
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
62
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
63
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
64
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
65
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
66
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
67
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
68
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
69
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
70
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
71
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
72
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
73
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
74
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
75
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
76
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
77
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
78
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
79
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
80
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
81
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
82
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
83
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
84
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
85
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
86
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
87
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
88
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
89
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
90
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
91
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
92
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
93
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
94
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
95
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
96
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
97
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
98
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
99
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
100
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)