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