javascript 在客户端绘制图表系列三——xy坐标曲线图

最新推荐文章于 2024-04-15 15:42:58 发布

octverve

最新推荐文章于 2024-04-15 15:42:58 发布

阅读量1.4k

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript colors distance jfreechart function html

JAVASCRIPT 专栏收录该内容

105 篇文章 0 订阅

订阅专栏

javascript 在客户端绘制图表系列三——xy坐标曲线图

系列1、2中介绍过的内容在这里不会赘述。
原理同面1、2基本一样。

<! 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 >

效果图：

/* ************更多技术文章请访问：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

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

this .IsDrawArrow = true ;
45

this .ArrowLength = 6 ;
46

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

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

this .jg.setStroke( 2 );
92

this .jg.setColor( " #FF0000 " );
93

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：

< 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来显示的。其实效率也不怎么高。不过服务器好的话，客户端就轻松。无非就是胖客户端和胖服务器的比较，立场都不同了。

程序内部注释较少，代码很少。

octverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
javascript 在客户端绘制图表系列三——xy坐标曲线图

javascript 在客户端绘制图表系列三——xy坐标曲线图系列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
复制链接

扫一扫