js生成柱狀圖

<script language=javascript>
function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){
//參數含義(傳遞的數組，橫座標，縱座標，柱子的厚度，柱子的寬度，圖表的寬度，圖表的高度,圖表的類型) 
//純JAVASCRIPT代碼生成圖表函數1——柱狀圖 
//運行環境爲IE 6.0 
//注意：倒立柱狀圖dataArray顯示順序錯了 
  
//*************************************************************************************** 
var tmdColor1 = new Array();
tmdColor1[0] = "#d1ffd1"; tmdColor1[1] = "#ffbbbb"; tmdColor1[2] = "#ffe3bb";
tmdColor1[3] = "#cff4f3"; tmdColor1[4] = "#d9d9e5"; tmdColor1[5] = "#ffc7ab";
tmdColor1[6] = "#ecffb7"; tmdColor1[7] = "green";
var tmdColor2 = new Array();
tmdColor2[0] = "#00ff00"; tmdColor2[1] = "#ff0000"; tmdColor2[2] = "#ff9900";
tmdColor2[3] = "#33cccc"; tmdColor2[4] = "#666699"; tmdColor2[5] = "#993300";
tmdColor2[6] = "#99cc00"; tmdColor2[7] = "yellow";
var tb_color = new Array(tmdColor1,tmdColor2);
var line_color = "#69f";
var left_width = 70;
var length = thickness/2;
var total_no = total[0].length;
var temp1 = 0;
var temp2,temp4,temp4;
for(var i = 0;i<total_no;i++) {
 if(temp1<total[0][i]) {
  temp1 = total[0][i];
 }
}
temp1 = parseInt(temp1.toString());
if(temp1>9){  
 temp2 = temp1.toString().substr(1,1)
 if(temp2>4) {
  temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+1)*Math.pow(10,(temp1.toString().length-1));
 }
 else {
  temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(temp1.toString().length-1));
 } 
} 
else{
 if(temp1>4)
  temp3 = 10; 
 else 
  temp3 = 5;
}
temp4=temp3
document.write("<!--[if gte vml 1]><v:rect id='_x0000_s1027' alt='' style='position:absolute;left:" + (table_x+left_width) + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:-1' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect><![endif]-->");
document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width) + "px," + (table_y+all_height) + "px' to='" + (table_x+all_width+left_width) + "px," + (table_y+all_height) + "px'/><![endif]-->");
document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width) + "px," + table_y + "px' to='" + (table_x+left_width) + "px," + (table_y+all_height) + "px'/><![endif]-->");
switch (table_type){
 case "A":  
 var table_space = (all_width-table_width*total_no)/total_no;
 document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px,"+ table_y + "px' to='" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px' strokecolor='" + line_color + "'/><![endif]-->");
 for(var i=0;i<=all_height-1;i+= all_height/5) {
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width)+ "px," + (table_y+all_height-length-i) + "px' to='" + (table_x+left_width+length) + "px," + (table_y+all_height-i) +"px' strokecolor='" + line_color + "'/><![endif]-->");
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px," + (table_y+all_height-length-i) + "px' to='" + (table_x+all_width+left_width) + "px," + (table_y+all_height-length-i) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+(left_width-15)) + "px," + (table_y+i) + "px' to='" + (table_x+left_width) + "px," + (table_y+i) + "px'/><![endif]-->");
  document.write("<!--[if gte vml 1]>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y+i) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape><![endif]-->");
  temp4 = temp4-temp3/5;
 }
 for(var i=0;i<total_no;i++) {
  
  var temp_space = table_x + left_width + table_space / 2 + table_space * i + table_width * i;  
  document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");
  document.write(temp_space);
  document.write("px;top:");
  document.write(table_y + all_height * (1 - (total[0][i] / temp3)));
  document.write("px;width:" + table_width + "px;height:" + all_height * (total[0][i] / temp3) + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");
  document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' type='gradient'/>")
  document.write("<o:extrusion v:ext='view' backdepth='" + thickness + "pt' color='" + tb_color[1][i] + "' on='t'/>");
  document.write("</v:rect>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + temp_space + "px;top:" + (table_y+all_height*(1-(total[0][i]/temp3))-table_width) + "px;width:" + (table_space+15) + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (temp_space-table_space/2) + "px;top:" + (table_y+all_height+1) + "px;width:" + (table_space+table_width) + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>");
 }
 break;
case "B":
 var table_space = (all_height - table_width * total_no) / total_no;
 document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+all_width) + "px," + (table_y+all_height-length) + "px' strokecolor='" + line_color + "'/><![endif]-->");
 for(var i=0;i<=all_width-1;i +=all_width/5) {
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+i) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+length+i) + "px," + (table_y+all_height) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length+i) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+length+i) + "px," + table_y + "px' strokecolor='" + line_color + "'/><![endif]-->");
  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height) + "px' to='" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height+15) + "px'/><![endif]-->");
  document.write("<!--[if gte vml 1]>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x+left_width+i+all_width/5-left_width) + "px;top:" + (table_y+all_height) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape><![endif]-->");
  temp4 = temp4 - temp3 / 5;
 }
 for(var i=0;i<total_no;i++) {
  var temp_space = table_space/2 + table_space * i + table_width * i;
  document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");
  document.write(table_x + left_width);
  document.write("px;top:");
  document.write(table_y + temp_space);
  document.write("px;width:" + all_width * (total[0][i] / temp3) + "px;height:" + table_width + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");
  document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' angle='-90' focus='100%' type='gradient'/>");
  document.write("<o:extrusion v:ext='view' backdepth='" + thickness + "pt' color='" + tb_color[1][i] + "' on='t'/>");
  document.write("</v:rect>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + left_width + all_width * (total[0][i] / temp3) + thickness / 2) + "px;top:" + (table_y + temp_space) + "px;width:" + (table_space + 15) + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y + temp_space) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>");
 }
  
 }
}
</script>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if !mso]>
<style>
v/:*         { behavior: url(#default#VML) }
o/:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
TD { FONT-SIZE: 9pt}
</style></head>
<body topmargin=5 leftmargin=0 scroll=AUTO>
<script language=javascript>
//=============調用方法===================== 
/*
1、修改dataArray和nameArray對於數據
2、修改table1函數理的tmdColor2對於的顏色代碼
3、"A"和"B"兩種類別圖
*/
var dataArray = new Array()
dataArray[0]=100.222
dataArray[1]=2000
dataArray[2]=3000
dataArray[3]=4000
dataArray[4]=5000
dataArray[5]=6000
dataArray[6]=7000
dataArray[7]=8000
var nameArray = new Array()
nameArray[0]="經營報"
nameArray[1]="招聘網"
nameArray[2]="51Job"
nameArray[3]="新民晚報"
nameArray[4]="新聞晚報"
nameArray[5]="南方週末"
nameArray[6]="羊城晚報"
nameArray[7]="晚報"
var total= new Array(dataArray,nameArray)
table1(total,200,50,20,35,500,200,"A");
table1(total,200,320,20,20,400,250,"B")
//倒立柱狀圖dataArray顯示順序錯了 
//table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){ 
//參數含義(傳遞的數組，橫座標，縱座標，柱子的厚度，柱子的寬度，圖表的寬度，圖表的高度,圖表的類型) 
</script>
</body>
</html>
http://www.cnblogs.com/zhongcj/archive/2008/03/07/1094632.html
PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

js生成柱狀圖

關於Iframe之間以及與父窗體的值傳遞(轉)

a href=# 與 a href=javascript:void(0) 的區別僞裝連接等

sql 特殊函數

struts 2 常用配置

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
