可适当参考  系列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
 29function 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 Bar("BarDiv");
24    mybar.drawBar(y,x);    
25
</script>        
26</body>
27</html>

bar.JPG
如上是效果。
posted on 2007-06-29 14:49 -274°C 阅读(2843) 评论(9)  编辑  收藏 所属分类: 计算机综合web前端


FeedBack:
# re: javascript 在客户端绘制图表系列二——柱图
2007-06-29 15:17 | Flyingis
请问浏览器兼容性如何?  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-06-29 15:23 | -274°C
在FIREFOX IE 下测试过,没有问题。  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-06-29 17:32 | search
学习了。。  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-06-29 23:53 | Druze.libo
一般来讲,图表在服务端生成比较合适  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-06-30 16:07 | Alexander.Yu
这样也可以省服务器的负担  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-07-02 15:42 | G_G
学习中 :)  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2007-07-08 07:32 | NULL
也打个包包给人下哦!!  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2010-09-21 09:43 | JS初学者
版主有这系列能用的代码没啊,复制太乱了,我想是下程序可以不  回复  更多评论
  
# re: javascript 在客户端绘制图表系列二——柱图
2014-06-25 15:43 | hannah
firefox可以用,IE居然不兼容  回复  更多评论
  

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


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 911505
  • 排名 - 40

最新评论