系列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
>

2

3

4

5

6

7

8

9

10

11

12



13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

效果图:
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


2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21



22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48



49

50

51

52



53

54

55

56

57

58

59

60

61

62

63

64

65



66

67

68

69

70

71

72

73



74

75

76

77

78

79

80



81

82

83

84

85

86

87
