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

效果图:
line.PNG

  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 阅读(9306) 评论(11)  编辑  收藏


FeedBack:
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-08-10 11:51 | 柱柱
怎么才能动态实现啊?  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图[未登录]
2007-08-10 13:20 | -274°C
@柱柱

动态的话,从数据库取一次再绘制就动态了。结合当前的AJAX 也许你能做出更多漂亮的效果。  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-08-29 16:22 | 柱柱
老板说这个功能太简单了,能不能实现打印?
或者你知道什么好点的,功能比较强点的?  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图[未登录]
2007-08-29 20:56 | -274°C
@柱柱
js写的是不能答应,因为他实现原理是用div模拟了点阵,无非就是div加了背景颜色……你打印肯定什么都没有。

你看看我总结的这篇文章
http://www.blogjava.net/JAVA-HE/archive/2007/05/08/115813.html
里面有不少报表,非js方面的也有。如果你不用jsp,或者你只考虑兼容IE,里面有个非常炫的能用。VML吧?  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-11-02 11:19 | JiMi
要实现在两条曲线呢,如何实现  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图[未登录]
2007-11-03 15:30 | Aaron
呵呵,不若用jfreechart实在啊。  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-11-03 17:01 | -274
@JiMi
这里我只是写了个demo,根据这个画线方法,再画线。也很容易了。
@Aaron
jfreechart 是服务端任务。而javascript是客户端的来完成。
  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-11-03 17:03 | -274
@柱柱

其实方法很多,你如果用服务端技术,那么可以用java生成bufferedimage,那么答应图片就行。当然php也一样的道理。

而作为胖客户端的话,可以根据判断选择svg、或者VML。那样生成的报表也是可以答应的。  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-12-10 16:02 | tianhua876543
KKK  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图[未登录]
2010-04-02 10:00 | aa
将div换成span 就可以了啊  回复  更多评论
  
# re: javascript 在客户端绘制图表系列三——xy坐标曲线图
2012-03-15 16:45 | HU Ruifemg
为什么我运行不了啊  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 870473
  • 排名 - 37

最新评论