`
rainer
  • 浏览: 24003 次
  • 性别: 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  
不错，可以做个数据图表展示
发表评论

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

相关推荐

    js+vml打造统计图(柱状\饼\折线),带说明

    JavaScript 和 VML（Vector Markup Language）技术在网页中创建统计图表是一种早期的解决方案，尤其在SVG（Scalable Vector Graphics）在所有现代浏览器得到广泛支持之前。本教程将深入探讨如何利用这两种技术来构建...

    Echarts+ajax+java+mysql实现饼图+折线图+柱状图

    Echarts是一个基于SVG/VML/Canvas的高性能、跨浏览器、跨平台的图表库，支持多种图表类型，如折线图、柱状图、饼图、散点图等。它提供了一套完整的API和交互设计，使得开发者能够方便地进行图表配置和定制，实现...

    3D柱状统计图，支持旋转功能

    在IT领域，尤其是在数据可视化和前端开发中，3D柱状统计图是一种常见的图表类型，用于展示多维度数据。这个程序“3D柱状统计图，支持旋转功能”由小可编写，它能够根据XML数据动态创建具有3D效果的柱状图，并且具备...

    使用VML在asp.net中做统计图的的绝佳示例（柱状，饼状图）--超级轻量

    总之，使用VML在ASP.NET中创建统计图是一种轻量级且灵活的方法，尤其适用于对性能和依赖管理有较高要求的项目。尽管现在SVG更为广泛地被采用，但在某些情况下，VML仍然不失为一个有效的解决方案。

    柱状图和饼图VML脚本

    在JavaScript中使用VML绘制柱状图，主要步骤包括： 1. 创建一个包含图表的容器元素，如`&lt;div&gt;`。 2. 为容器元素添加VML样式，使其能够显示VML图形。 3. 使用JavaScript动态创建VML形状（如`&lt;v:shape&gt;`），并设置其...

    VML统计图之直方图

    常见的统计图有折线图、柱状图、饼图、散点图和直方图等。 4. **直方图**：直方图与条形图类似，但区别在于其主要用于连续数据的分布，通过矩形的宽度表示数据的区间，高度则表示该区间的数据量。直方图可以帮助...

    asp\asp.net统计图VML(asp版加asp.net版，含饼图、曲线图、柱图)

    在给定的资源中，"asp\asp.net统计图VML"是一个关于如何在ASP和ASP.NET中创建统计图表的教程或组件，主要涵盖了饼图、曲线图和柱图这三种常见的数据可视化形式。 VML，全称Vector Markup Language，是一种用于在...

    用VML+JavaScript写的一个通用统计图表

    这种图表库可以用来显示各种类型的统计数据，如柱状图、折线图、饼图等，帮助用户更好地理解和分析数据。 首先，了解VML的基本概念是必要的。VML元素通常被嵌入HTML文档中，通过定义形状（如矩形、线条、曲线）、...

    自制:ASP.NET利用VML绘制统计图

    在“自制:ASP.NET利用VML绘制统计图”这个主题中，我们将探讨如何利用VML技术在ASP.NET环境下生成3D饼图和3D柱状图，以实现立体视觉效果。 1. **VML介绍** VML是Visual Markup Language的缩写，它允许开发者在HTML...

    反编译的VML绘制统计图代码（C#类）

    在本主题中，我们关注的是如何使用C#语言进行VML绘制统计图表，如柱状图和条形图。通过反编译已有的库并结合个人经验，我们可以更深入地理解VML的底层工作原理，以便于自定义开发和学习。 首先，让我们了解一下VML...

    3d柱状图

    在本文中，我们将深入探讨如何利用JavaScript和VML（Vector Markup Language）技术来实现3D柱状图，并针对IE浏览器的兼容性进行讲解。 首先，让我们了解一下VML。VML全称为矢量标记语言，它是一种用于在网页上绘制...

    一个网友写的三维统计图

    总的来说，这个网友的三维统计图项目展示了早期Web开发中的一些技术，如VML和JavaScript，以及如何利用它们在受限环境下创建可视化效果。虽然如今这些技术已经被SVG和WebGL等更先进的标准取代，但它们在历史上的作用...

    ASP统计图，折线图、饼图、拄状图等...

    在"asp+vml(2版)"这个压缩包中，很可能是包含了使用VML和ASP结合创建统计图的示例代码或者教程。这些资源可以帮助开发者了解如何在不依赖额外JavaScript库或插件的情况下，利用服务器端的ASP技术来生成统计图形。 ...

    使用js画统计图

    "使用js画统计图"这个主题涉及到的是如何利用JavaScript库或者自定义代码来创建各种图表，如柱状图、折线图、饼图、散点图等，以便直观地展示数据。这种技术的优点在于其灵活性、兼容性和无需依赖额外插件。 ...

    echarts前端统计图DEMO

    **ECharts前端统计图DEMO** 是一个基于jQuery和ECharts的统计图表示例集合，旨在帮助开发者快速理解和应用ECharts库。ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它支持丰富的图形类型，如柱状图、...

    amcharts 柱状图

    柱状图是一种常用的统计图表，用于比较不同类别的数据。在AmCharts中，柱状图由一系列垂直或水平的矩形（柱子）表示，每个柱子的高度（或长度）对应着数据值的大小。 ### 三、创建柱状图的步骤 1. **引入库文件**...

    jquery实现统计图，可以实现各种样式的图标

    **Highcharts**：Highcharts是一个基于JavaScript的开源图表库，支持多种图表类型，包括柱状图、折线图、饼图等。它允许开发者创建高度自定义的、互动性强的图表，适用于Web和移动设备。Highcharts采用SVG（可缩放...

    HighchartsJS是一个基于SVG和VML渲染的JavaScript图表库

    - **丰富的图表类型**：提供多种图表类型，如折线图、柱状图、饼图、散点图、面积图、热力图等，满足不同数据展示需求。 - **交互性**：图表具有良好的交互性，允许用户通过点击、悬浮、缩放和滚动来探索数据。 -...

    用fusionchart 统计图

    FusionCharts是一款强大的JavaScript图表库，它提供了丰富的图表类型，如饼图、折线图、柱状图等，用于创建交互式的数据可视化解决方案。在这个例子中，你将找到如何使用FusionCharts来创建这些基本图表的实践应用。...

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