javascript 在客户端绘制图表系列二——柱图

可适当参考  系列1 饼图 http://www.blogjava.net/JAVA-HE/archive/2007/06/29/126957.html

  1 /**/ /*************更多技术文章请访问：http://www.blogjava.net/JAVA-HE****************
  2 *
  3 *    文件名：bar.js V 1.01
  4 *    
  5 *    作  者：何昌敏
  6 *
  7 *    时  间：2007-6
  8 *
  9 *    描  述：绘制柱图
 10 *
 11 *    备  注：
 12 *                1.修改数据==0，出现的图形走样bug。（设置了2像素作为0的显示）
 13 *                2.startx 实现水平移动。
 14 *                3.实现自动比例。
 15 *                4.实现实现柱的宽度自适应，分布自适应。
 16 *                5.实现比较严格的参数判断。
 17 *                6.实现了图像清除。
 18 *                7.是否画上箭头。 在画箭头的时候可设定箭头大小。
 19 *
 20 *    说  明：
 21 *                对于其位置的调整并没有做更多扩展，能自适应大小。
 22 *                至于位置，我想直接控制div的位置比较方便。
 23 *                当然还有背景的绘制，也认为修改DIV的背景，比在这里画要方便点。
 24 
 25 *    感  谢：Walter Zorn提供了API ——wz_jsgraphics.js v. 3.01。
 26 *                
 27*************更多技术文章请访问：http://www.blogjava.net/JAVA-HE****************/
 28
 29 function  Bar(_div)
 30 {
 31    var barjg = new jsGraphics(_div);
 32    var colors = new Array();
 33    colors[0] = "#0066FF";
 34    colors[1] = "#FF6633";
 35    colors[2] = "#9900FF";
 36    colors[3] = "#FF0066";
 37    colors[4] = "#066600";
 38    colors[5] = "#006633";
 39    colors[6] = "#33FFFF";
 40    colors[7] = "#000000";
 41    colors[8] = "#FFFF00";
 42    colors[9] = "#000033";
 43    colors[10] = "#CCFFFF";
 44    colors[11] = "#666666";
 45    
 46    this.start_x = 40;
 47    this.start_y = 0;
 48    this.width=200;
 49    this.height=120;
 50    this.line_num=6;
 51    this.y_start_x = 0;
 52    this.scale=12;    
 53    this.IsDrawArrow = true;
 54    this.ArrowLength =6;
 55    
 56    this.drawBar = function (_y,_x)
 57    {
 58        var y_len = _y.length;
 59        var x_len = _x.length;
 60        if(y_len != x_len)
 61        {
 62            alert("X and Y length of inconsistencies, errors parameters.");
 63            return;
 64        }
 65        barjg.setColor("#000000");
 66        barjg.drawLine(this.start_x,this.height+this.start_y,this.width+this.start_x,this.height+this.start_y);//x line
 67        barjg.drawLine(this.start_x,this.start_y,this.start_x,this.height+this.start_y);// y line
 68      if(this.IsDrawArrow)
 69      {
 70          barjg.drawLine(this.width+this.start_x,this.height+this.start_y+this.ArrowLength,this.width+this.start_x+this.ArrowLength,this.height+this.start_y);
 71          barjg.drawLine(this.width+this.start_x,this.height+this.start_y-this.ArrowLength,this.width+this.start_x+this.ArrowLength,this.height+this.start_y);
 72            barjg.drawLine(this.width+this.start_x,this.height+this.start_y,this.width+this.start_x+this.ArrowLength,this.height+this.start_y);
 73            barjg.drawLine(this.start_x,this.start_y-this.ArrowLength,this.start_x-this.ArrowLength,this.start_y+this.ArrowLength);
 74            barjg.drawLine(this.start_x,this.start_y-this.ArrowLength,this.start_x+this.ArrowLength,this.start_y+this.ArrowLength);
 75            barjg.drawLine(this.start_x,this.start_y,this.start_x,this.start_y-this.ArrowLength);
 76      }
 77      var max_H=0;
 78    for(i=0;i<y_len;i++)
 79    {
 80        if(isNaN(_y[i]))
 81        {
 82            alert("y is not a number!");
 83                return;
 84        }
 85            if(max_H<_y[i])
 86            {
 87              max_H=_y[i];
 88            }
 89    }
 90        this.scale=Math.round(max_H/this.height);
 91        //每像素代表数值10
 92        if(    this.scale<10)
 93        {
 94            scale=10;
 95        }
 96        for(i=0;i<this.line_num;i++)
 97        {
 98            var y=this.height*i/this.line_num;        
 99            barjg.setStroke(Stroke.DOTTED);    
100            barjg.drawLine(this.start_x,y+this.start_y,this.width+this.start_x,y+this.start_y);    
101            barjg.drawString(""+Math.round((this.height-y)*this.scale),this.y_start_x,y+this.start_y);
102        }
103        barjg.setStroke(2);
104        for(i=0;i<x_len;i++)
105        {
106            var barwidth=(this.width-this.start_x)/(x_len*2);
107            var startX=this.start_x+(i+1)*this.width/x_len-barwidth;
108            barjg.setColor(colors[i]);
109            //从左上到右下
110            barjg.fillRect( startX,this.height-Math.max(_y[i]/this.scale,2)+this.start_y,barwidth,Math.max(_y[i]/this.scale,2));
111            barjg.drawString(_x[i],startX,this.height+this.start_y);
112        }
113        barjg.paint();
114   };
115        this.clearBar =function()
116    {
117        barjg.clear();
118    };
119    }

上面js文件保存为：bar.js,使用下面DEMO 文件的的时候，一样需要引入wz_jsgraphics.js。可以在 http://www.blogjava.net/Files/JAVA-HE/pieDemo.rar 下载。

 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 ="bar.js" ></ script >
 8 </ head >
 9 < body >
10 < p > 1.柱图 </ p >
11 < div  id ="BarDiv"  style ="position:relative;height:200px;width:300px;" ></ div >
12
13 < script  language ="javascript" >
14    var y= new Array ();
15     y[0] = 11112;
16     y[1] = 16000;
17     y[2] = 20000;
18
19    var x = new Array ();
20    x[0] = "a";
21    x[1] = "b";
22    x[2] = "c";    
23    var mybar = new