系列1、2中介绍过的内容在这里不会赘述。
原理同面1、2基本一样。
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
<
title
>
TEST
</
title
>
6
<
script
type
="text/javascript"
src
="wz_jsgraphics.js"
></
script
>
7
<
script
type
="text/javascript"
src
="line.js"
></
script
>
8
</
head
>
9
<
body
>
10
<
p
>
1.线图
</
p
>
11
<
div
id
="LineDiv"
style
="position:relative;height:200px;width:300px;"
></
div
>
12
<
script
language
="javascript"
>
13
var
y
=
new
Array ();
14
y[
0
]
=
16000
;
15
y[
1
]
=
1000
;
16
y[
2
]
=
20000
;
17
y[
3
]
=
100
;
18
y[
4
]
=
-
500
;
19
y[
5
]
=
9000
;
20
var
x
=
new
Array ();
21
x[
0
]
=
"
a
"
;
22
x[
1
]
=
"
b
"
;
23
x[
2
]
=
"
c
"
;
24
x[
3
]
=
"
aa
"
;
25
x[
4
]
=
"
bb
"
;
26
x[
5
]
=
"
dd
"
;
27
var
myline
=
new
Line(
"
LineDiv
"
);
28
myline.drawXYLine(y,x);
29
//
myline.clearLine();
30
</
script
>
31
</
body
>
32
</
html
>
效果图:
1
/**/
/*
************更多技术文章请访问:http://www.blogjava.net/JAVA-HE****************
2
*
3
* 文件名:line.js V 1.01
4
*
5
* 作 者:何昌敏
6
*
7
* 时 间:2007-7
8
*
9
* 描 述:绘制坐标曲线图
10
*
11
* 备 注:
12
* 1.实现了根据所提供数据,自动标刻y轴坐标。
13
* 2.实现了图像清除。
14
* 3.调整startx starty能实现整体位置调整。
15
*
16
* 感 谢:Walter Zorn提供了API ——wz_jsgraphics.js v. 3.01。
17
*
18
*************更多技术文章请访问:http://www.blogjava.net/JAVA-HE***************
*/
19
20
function
Line(obj)
21
{
22
this
.jg
=
new
jsGraphics(obj);
23
var
colors
=
new
Array();
24
colors[
0
]
=
"
#0066FF
"
;
25
colors[
1
]
=
"
#FF6633
"
;
26
colors[
2
]
=
"
#9900FF
"
;
27
colors[
3
]
=
"
#FF0066
"
;
28
colors[
4
]
=
"
#066600
"
;
29
colors[
5
]
=
"
#006633
"
;
30
colors[
6
]
=
"
#33FFFF
"
;
31
colors[
7
]
=
"
#000000
"
;
32
colors[
8
]
=
"
#FFFF00
"
;
33
colors[
9
]
=
"
#000033
"
;
34
colors[
10
]
=
"
#CCFFFF
"
;
35
colors[
11
]
=
"
#666666
"
;
36
this
.start_x
=
40
;
//
应大于等于y_str_width
37
this
.y_str_width
=
40
;
//
坐标系的左边距
38
this
.x_str_tom
=
10
;
//
x轴文字 距离坐标系底部距离。
39
this
.start_y
=
20
;
//
>=this.ArrowLength*2 箭头的高度
40
this
.width
=
200
;
41
this
.height
=
120
;
42
this
.y_line_num
=
5
;
43
44
this
.IsDrawArrow
=
true
;
45
this
.ArrowLength
=
6
;
46
47
this
.drawXYLine
=
function
(_y,_x)
48
{
49
var
y_length
=
_y.length;
50
var
x_length
=
_x.length;
51
if
(y_length
!=
x_length)
52
{
53
alert(
"
X and Y length of inconsistencies, errors parameters.
"
);
54
return
;
55
}
56
var
y_line_distance
=
Math.round(
this
.height
/
this
.y_line_num);
57
var
x_line_distance
=
Math.round(
this
.width
/
x_length);
58
59
this
.jg.drawLine(
this
.start_x,
this
.start_y
+
this
.height,
this
.start_x
+
this
.width,
this
.start_y
+
this
.height);
//
x
60
this
.jg.drawLine(
this
.start_x,
this
.start_y
+
this
.height,
this
.start_x,
this
.start_y);
//
y
61
this
.jg.setStroke(Stroke.DOTTED);
62
var
_y_copy
=
_y.concat();
63
var
temp
=
_y;
64
temp.sort(
function
AscSort(x, y)
65
{
66
return
x
==
y
?
0
: (x
>
y
?
1
:
-
1
);
67
}
68
);
69
var
y_max2y_min
=
temp[x_length
-
1
]
-
temp[
0
];
70
var
y_min
=
temp[
0
];
71
var
y_value_distance
=
y_max2y_min
/
this
.y_line_num;
72
for
(
var
i
=
0
;i
<
this
.y_line_num;i
++
)
73
{
74
var
y_item
=
this
.start_y
+
this
.height
-
(i
+
1
)
*
y_line_distance;
75
this
.jg.drawLine(
this
.start_x,y_item,
this
.start_x
+
this
.width,y_item);
76
var
y_v
=
Math.round(y_value_distance
*
(i
+
1
)
+
y_min);
77
this
.jg.drawString(y_v,
this
.start_x
-
this
.y_str_width,y_item);
78
}
79
for
(i
=
0
;i
<
x_length;i
++
)
80
{
81
this
.jg.setStroke(
-
1
);
82
this
.jg.setColor(
"
#000000
"
);
83
var
x_item_end
=
this
.start_x
+
x_line_distance
*
(i
+
1
);
84
this
.jg.drawLine(x_item_end,
this
.start_y
+
this
.height,x_item_end,
this
.start_y);
85
this
.jg.drawString(_x[i],x_item_end,
this
.start_y
+
this
.height
+
10
);
86
}
87
for
(i
=
y_length;i
>
1
;i
--
)
88
{
89
90
91
this
.jg.setStroke(
2
);
92
this
.jg.setColor(
"
#FF0000
"
);
93
94
var
x_temp_1
=
this
.start_x
+
x_line_distance
*
(i);
95
var
x_temp_2
=
this
.start_x
+
x_line_distance
*
(i
-
1
);
96
//
alert(_y_copy[i-1]);
97
//
alert(y_min);
98
//
alert(y_max2y_min);
99
var
y_temp_1
=
Math.round(
this
.height
-
this
.height
*
(_y_copy[i
-
1
]
-
y_min)
/
y_max2y_min
+
this
.start_y);
100
var
y_temp_2
=
Math.round(
this
.height
-
this
.height
*
(_y_copy[i
-
2
]
-
y_min)
/
y_max2y_min
+
this
.start_y);
101
this
.jg.drawLine(x_temp_1,y_temp_1,x_temp_2,y_temp_2);
102
}
103
if
(
this
.IsDrawArrow)
104
{
105
this
.jg.setStroke(
1
);
106
this
.jg.setColor(
"
#000000
"
);
107
this
.jg.drawLine(
this
.start_x
-
this
.ArrowLength,
this
.start_y,
this
.start_x,
this
.start_y
-
2
*
this
.ArrowLength);
108
this
.jg.drawLine(
this
.start_x
+
this
.ArrowLength,
this
.start_y,
this
.start_x,
this
.start_y
-
2
*
this
.ArrowLength);
109
this
.jg.drawLine(
this
.start_x,
this
.start_y,
this
.start_x,
this
.start_y
-
2
*
this
.ArrowLength);
110
this
.jg.drawLine(
this
.start_x
+
this
.width,
this
.start_y
+
this
.height
-
this
.ArrowLength,
this
.start_x
+
this
.width
+
2
*
this
.ArrowLength,
this
.start_y
+
this
.height);
111
this
.jg.drawLine(
this
.start_x
+
this
.width,
this
.start_y
+
this
.height
+
this
.ArrowLength,
this
.start_x
+
this
.width
+
2
*
this
.ArrowLength,
this
.start_y
+
this
.height);
112
this
.jg.drawLine(
this
.start_x
+
this
.width,
this
.start_y
+
this
.height,
this
.start_x
+
this
.width
+
2
*
this
.ArrowLength,
this
.start_y
+
this
.height);
113
}
114
this
.jg.paint();
115
}
;
116
this
.clearLine
=
function
()
117
{
118
this
.jg.clear();
119
}
;
120
}
总结遇到过的一些问题,一数组排序
总结如下:
http://www.blogjava.net/JAVA-HE/archive/2007/07/01/127304.html
二数组排序后怎么取原来没有排序的数组
eg:
1
<
html
>
2
<
body
>
3
<
script
type
="text/javascript"
>
4
function
AscSort(x, y)
{
5
return
x
==
y
?
0
: (x
>
y
?
1
:
-
1
);
6
}
7
var
y
=
new
Array(
36000
,
200
,
500
,
10100
);
8
var
te
=
y;
9
te.sort(AscSort);
10
alert(te);
11
alert(y);
12
</
script
>
13
</
body
>
14
</
html
>
如上程序,我对数组te排序了。但是我又要用到没有排序的数组y,但是程序的结果是y也排序了。有什么方法吗?
问题解决:利用concat方法,实现了数组的拷贝。
后记:这种方式的确实现了将数据库中动态数据以图表形式显示在页面上。程序以javascript实现,利用ajax将实现更好的用户体验。这样做减轻了服务端的压力。不过,这种方式的确定是客户端变得庞大。而且其实现原理很恐怖,基本是div实现点阵字原理(一点点画上去的)来搞的。效率就显得不够快。不过我在项目用这中方式也做完一个项目了。呵呵,和原来用jfreechart比较,感觉jfreechart (当然完全可以利用cewolf来简化操作)不爽的地方是他总是先生成图。然后利用src来显示的。其实效率也不怎么高。不过服务器好的话,客户端就轻松。无非就是胖客户端和胖服务器的比较,立场都不同了。
程序内部注释较少,代码很少。
posted on 2007-07-01 04:31
-274°C 阅读(9889)
评论(11) 编辑 收藏