可適當參考 系列1 餅圖
http://www.tkk7.com/JAVA-HE/archive/2007/06/29/126957.html 1
/**//*************更多技術文章請訪問：http://www.tkk7.com/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.tkk7.com/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.tkk7.com/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> 
如上是效果。
posted on 2007-06-29 14:49
-274°C 閱讀(2861)
評論(9) 編輯 收藏 所屬分類:
計算機綜合 、
web前端