`
rainer
  • 浏览: 23466 次
  • 性别: Icon_minigender_1
  • 来自: 湖北荆州
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript+vml做柱状统计图

JavaScriptASPJ#MicrosoftHTML 
阅读更多

最近因工作需要需要用javascript在客户端做图表统计功能,在网上找到一个不错的方式法,用VML来绘制图表(showPercent.html):

java 代码
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">   
  2. <head>   
  3. <title>图表</title>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>   
  5. <STYLE>   
  6. v\:* { BEHAVIOR: url(#default#VML) }   
  7. .memo{   
  8.      border-top: solid black;   
  9.     border-right:solid black;   
  10.      border-bottom:solid black;   
  11.    border-left:solid black;   
  12.      padding-top:10px;   
  13.      padding-left:10px;   
  14.      padding-bottom:10px;   
  15.      padding-right:10px;   
  16. border-width:1px;   
  17.      background-color:#EFEFEF;   
  18.      font-size:9pt;   
  19.      font-family:宋体;   
  20. }   
  21. .memo1{   
  22.      padding-top:3px;   
  23.      padding-left:3px;   
  24.      padding-bottom:3px;   
  25.      padding-right:3px;   
  26. border-width:1px;   
  27.      background-color:#EFEFEF;   
  28.      font-size:9pt;   
  29.      font-family:宋体;   
  30. }    
  31.    .ddd{   
  32.    border-top: solid silver;   
  33.    border-right:solid silver;   
  34.    border-bottom:solid silver;   
  35.    border-left:solid silver;   
  36.      border-width:1px;   
  37. }   
  38. .title{   
  39.      padding-top:5px;   
  40.      padding-left:10px;   
  41.      padding-bottom:5px;   
  42.      padding-right:10px;   
  43.      font-size:10pt;   
  44.      font-family:宋体;   
  45. }    
  46. A{   
  47. font-size:9pt;   
  48. color: blue;   
  49. text-decoration:none;   
  50. }   
  51. A:hover{color:red;text-decoration:underline;}   
  52. </STYLE>   
  53. <script>   
  54.   
  55. // 该段变量用 ASP 获取表单值 来设置   
  56. var aoNum = new Array();    // 分数集合   
  57. var aoMember = new Array(); // 分数对应集合   
  58. // 该段变量用 ASP 获取表单值 来设置   
  59.   
  60. var aoPercent = null; // 保存对 aoNum 成员对应应百分比   
  61. var count = 0;   
  62. // 设置 aoPercent   
  63. function InintaoPercent(){   
  64.     aoMember = window.location.search.match(/counts=([^&]+)/)[1].split(",");   
  65.     aoNum = window.location.search.match(/members=([^&]+)/)[1].split(",");   
  66.        
  67.        
  68.     count = eval(aoMember.join("+"));   
  69.     if(aoNum.length == 0) return false;   
  70.     aoPercent = new Array();   
  71.   
  72.     for(var i=0; i<aoNum.length; i++){   
  73.         aoPercent[i] = Math.round(100*aoMember[i]/count);   
  74.     }   
  75.   
  76.     for(var i = 0 ; i < aoNum.length; i ++)   
  77.     {   
  78.     temarray0[i] =  aoNum[i];   
  79.     temarray1[i] = Math.round(10* aoPercent[i]) // 1000 * aoPercent[i] / 100   
  80.     }   
  81.     dataarray[0] = temarray0   
  82.     dataarray[1] = temarray1   
  83. }   
  84.   
  85. ///////////////////////////////////////////////////////   
  86. var dSumData = 0  
  87. var dCs = 0  
  88. var MaxData = 0  
  89. var dataarray = new Array()   
  90.   
  91. var temarray0 = new Array()   
  92. var temarray1 = new Array()   
  93.   
  94. function drawLinesX(m)   
  95. {      
  96.     var num = aoMember;   
  97.     for(var i=0;i<num.length;i++){   
  98.         for(var j=0;j<i;j++){   
  99.             if(parseInt(num[j])<parseInt(num[i])){   
  100.                 var filter = num[j];   
  101.                 num[j]=num[i];   
  102.                 num[i]=filter;   
  103.             }   
  104.         }   
  105.     }   
  106.        
  107.     var temp = num[0]/5;   
  108.     count=0; //画横坐标   
  109.     var str = 1;   
  110.     var textPoint=Math.round(temp);   
  111.     for(var i=1;i<=10;i++){   
  112.         var py=2750-i*245;   
  113.         var strTo=m+" "+py;        
  114.         var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");   
  115.         group2.insertBefore(newLine);   
  116.         if(count%2!=0){            
  117.             var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");   
  118.             newLine.insertBefore(newStroke);   
  119.             var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")    
  120.             group2.insertBefore(newShape);    
  121.             var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");   
  122.             newShape.insertBefore(newText);   
  123.             newText.innerText=textPoint;   
  124.             str += 1;    
  125.             textPoint = Math.round(temp*str);   
  126.         }   
  127.         else{              
  128.             var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");   
  129.             newLine.insertBefore(newStroke);   
  130.         }   
  131.         count++;   
  132.     }   
  133.   
  134. }   
  135. function drawLinesY()   
  136. {   
  137.     //画X轴上的刻度   
  138.     var textPoint= "";   
  139.     var fColWidth = 4200 / (dataarray[0].length + 1)   
  140.     var iCols = dataarray[0].length + 1  
  141.     for(var i=1;i<=iCols;i++){   
  142.     if(i != iCols) textPoint = dataarray[0][i-1]   
  143.     else textPoint = ""  
  144.     var py=170+ i * fColWidth ;   
  145.     var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>");   
  146.     group2.insertBefore(newLine);   
  147.     var newStroke = document.createElement("<v:stroke color='black'>");   
  148.     newLine.insertBefore(newStroke);    
  149.     var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")     
  150.     group2.insertBefore(newShape);       
  151.     var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='0pt,0pt,0pt,0pt' style='font-size:9pt;v-text-anchor:top-right-baseline'></v:textbox>");   
  152.     //生成文本筐   
  153.     newShape.insertBefore(newText);   
  154.     newText.innerHTML= textPoint;   
  155.     }   
  156. }   
  157. function drawBar(v,t,color)   
  158. {   
  159.     var textPoint= "";   
  160.     var fColWidth = 4200 / (dataarray[0].length + 1);   
  161.     var iCols = dataarray[0].length + 1;   
  162.   
  163.     for(var i = 0; i < iCols - 1; i ++)   
  164.     {   
  165.         if(MaxData < dataarray[1][i]) MaxData = dataarray[1][i];   
  166.         dSumData = dSumData + dataarray[1][i];   
  167.     }   
  168.     if(dSumData == 0) dSumData = 1;   
  169.     if(MaxData == 0) MaxData = 1;   
  170.     dCs = 2400 / MaxData;   
  171.     for(var i = 0; i < iCols - 1; i ++)   
  172.     {   
  173.         var textPoint = dataarray[1][i];   
  174.         var h = dCs * dataarray[1][i];   
  175.         var px=2700 - h;   
  176.         var py=170 + i * fColWidth + fColWidth / 4 * 3;   
  177.         var color1="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";   
  178.         //alert(color1)    
  179.         var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:" + fColWidth / 2 + "px;HEIGHT:"+h+"px;z-index:9;border-width:0' fillcolor='" + color1 + "' title = '本项数值为：" + aoMember[i] + " 总和为：" + count + " 百分比：" + (aoPercent[i]) + "%'></v:rect>");    
  180.         group2.insertBefore(newShape);   
  181.     }   
  182. }   
  183. function drawBars()   
  184. {   
  185. drawLinesX(4500);   
  186. //画横线   
  187. drawLinesY();   
  188. //画X轴的刻度   
  189. drawBar(2.5,1,"blue");   
  190. }   
  191.   
  192. function window.onload(){   
  193.     InintaoPercent();   
  194.     drawBars();   
  195. }   
  196. </script>   
  197. <body style="margin: 0px; border: 0px;">   
  198. <table align="center" ID="Table1">   
  199. <tr>   
  200. <td >   
  201. <div class="memo" style="width:700;line-height:23px">   
  202. <center><strong>数据图表</strong></center>   
  203. <br>   
  204. <v:group ID="group2" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">   
  205. <v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">   
  206. <v:stroke StartArrow="classic"/>   
  207. </v:line>   
  208. <v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">   
  209. <v:stroke EndArrow="classic"/>   
  210. </v:line>   
  211. <v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">   
  212. <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>   
  213. </v:rect>   
  214.     <v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">   
  215.       <v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>   
  216.     </v:shape>   
  217. </v:group>   
  218. </div>   
  219. </td>   
  220. </tr>   
  221. </table>   
  222. </body>  

上面是生成图表的代码,调用的代码如下:

showPercent.html?counts=a,b,c,d,e,f&members=3,5,2,7,4,5

 

分享到：
| JQuery学习
评论
1 楼 zzg810314 2008-05-15  
不错，可以做个数据图表展示
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics