jsp+vml 实现柱状图、饼图、折线图

最新推荐文章于 2024-07-14 00:40:50 发布
最新推荐文章于 2024-07-14 00:40:50 发布
阅读量2k 收藏 3
点赞数
分类专栏： ASP JS 文章标签： jsp function button microsoft input generator

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page pageEncoding="gb2312"%>
<html   xmlns:v="urn:schemas-microsoft-com:vml">  
   
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">  
  <meta   name="ProgId"   content="FrontPage.Editor.Document">  
  <title></title>  
  <style>v/:*{behavior:url(#default#vml)}/*声明v为vml变量*/</style>  
  </head>  
   
  <body   οnlοad="InitVRML();">  
   
  <script>  
  //模拟数据  
  var   RecordSetArray=new   Array();  
  //模拟记录条数  
  var   iRecordCount=20;  
  for(iIndex=0;iIndex<iRecordCount;iIndex++)  
  {  
    var   UnitArray=new   Array();  
    UnitArray[0]=iIndex;  
    UnitArray[1]=Math.round(Math.random()*1000);  
    RecordSetArray[iIndex]=UnitArray;  
  }  
  //模拟数据Y轴最大值[范围]  
  var   iRecordMaxX=20;//模拟数据X轴最大值[范围]  
  var   iRecordMaxY=1000;//模拟数据Y轴最大值[范围]  
  //坐标系统  
  var   iScreenWidth=400;//真实宽度PX  
  var   iScreenHeight=400;//真实高度PX  
  var   iCoordSizeX=4000;//分隔宽度  
  var   iCoordSizeY=4000;//分隔高度  
  var   iCoordSizeStep=200;//坐标轴与边距  
  var   iRectSize=100;//柱状图柱体宽度  
  var   vGroup=null;//VRML区域  
  function   Line(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    CoordSize();  
    CoordSizeLine();  
    var   iFromX=iCoordSizeStep;  
    var   iFromY=0;  
    for(iIndex=0;iIndex<iRecordCount;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.style.left="0";  
      vLine.style.top="0";  
      vLine.from="'"+iFromX+","+iFromY+"'";  
  iFromX=iCoordSizeStep+Math.round(RecordSetArray[iIndex][0]*(iCoordSizeX-iCoordSizeStep)/iRecordMaxX);  
  iFromY=Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vLine.to="'"+iFromX+","+iFromY+"'";  
      vLine.strokecolor="#000000";  
      vLine.strokeweight="1";  
      vLine.title="模拟数据第"+RecordSetArray[iIndex][0]+"条";  
      //var   vStroke=document.createElement("v:stroke");  
      //vStroke.EndArrow="Classic";  
      //vStroke.StartArrow="Oval";  
      //vLine.appendChild(vStroke);  
      vGroup.appendChild(vLine);  
    }    
  }  
  function   Circle(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    var   varMax=Math.pow(2,16)*360;  
    var   vTotal=1;  
    var   vStartAngle=0;  
    var   vEndAngle=0;  
    var   vPreAngle=0;  
    for(kIndex=0;kIndex<iRecordCount;kIndex++)  
    {  
      vTotal+=RecordSetArray[kIndex][1];  
    }  
    for(iIndex=0;iIndex<iRecordCount;iIndex++)  
    {  
      var   vShape=document.createElement("v:shape");      
      vStartAngle+=vPreAngle;  
      vPreAngle=RecordSetArray[iIndex][1]/vTotal;  
                    vEndAngle=RecordSetArray[iIndex][1]/vTotal;  
   
      vShape.style.width=iCoordSizeX-2*iCoordSizeStep;  
      vShape.style.height=iCoordSizeY-2*iCoordSizeStep;  
      vShape.style.top=iCoordSizeStep;  
      vShape.style.left=iCoordSizeStep;  
      vShape.strokecolor="black";  
      vShape.fillcolor=RandColor();  
   
                    vShape.path="M   2000   2000   AE   2000   2000   2000   2000   "+parseInt(varMax*vStartAngle)+"   "+parseInt(varMax*vEndAngle)+"   xe";  
      vShape.title="第"+RecordSetArray[iIndex][0]+"块";  
      vShape._scale=parseInt(360*(vStartAngle+vEndAngle/2));  
      vGroup.appendChild(vShape);  
    }  
  }  
  function   Bar(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    CoordSize();  
    CoordSizeLine();  
    var   iStep=Math.round(iCoordSizeX/iRecordCount);  
    for(iIndex=1;iIndex<iRecordCount;iIndex++)  
    {  
      var   iRnd=Math.round(Math.random()*(iCoordSizeY-iCoordSizeStep));  
      var   vRect=document.createElement("v:rect");  
      vRect.style.left=iStep*iIndex;  
      vRect.style.top=(iCoordSizeY-iCoordSizeStep)-Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vRect.style.width=iRectSize;  
      vRect.style.height=Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vRect.fillColor="#EEEEEE";  
      vRect.title="模拟数据第"+RecordSetArray[iIndex][0]+"条的Y轴图示";  
      vGroup.appendChild(vRect);  
    }  
  }  
  function   DrawLinesX(iMaxX,Object)  
  {  
    var   iStep=Math.round(iCoordSizeX/iMaxX);  
    for(var   iIndex=1;iIndex<=iMaxX;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.from=iStep*iIndex+","+(iCoordSizeY-iCoordSizeStep);  
      vLine.to=iStep*iIndex+","+(iCoordSizeY-Math.round(iCoordSizeStep/2));  
      var   vStroke=document.createElement("v:stroke");  
      vStroke.endArrow="Diamond";  
      vStroke.dashStyle="dot";  
      vLine.appendChild(vStroke);  
      Object.appendChild(vLine);  
    }  
  }  
  function   DrawLinesY(iMaxY,Object)  
  {  
    var   iStep=Math.round(iCoordSizeY/iMaxY);  
    for(var   iIndex=0;iIndex<iMaxY;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.from=iCoordSizeStep+","+iStep*iIndex;  
      vLine.to=Math.round(iCoordSizeStep/2)+","+iStep*iIndex;  
      var   vStroke=document.createElement("v:stroke");  
      vStroke.endArrow="Diamond";  
      vStroke.dashStyle="dot";  
      vLine.appendChild(vStroke);  
      Object.appendChild(vLine);  
    }  
  }  
  function   InitVRML()  
  {  
    VRMLID.innerHTML="";  
    vGroup=document.createElement("v:group");  
    vGroup.style.width=iScreenWidth+"px";  
    vGroup.style.height=iScreenHeight+"px";  
    vGroup.coordsize=iCoordSizeX+","+iCoordSizeY;  
     
    var   vRect=document.createElement("v:rect");  
    vRect.style.width=iCoordSizeX+"px";  
    vRect.style.height=iCoordSizeY+"px";  
    vRect.fillColor="#FFFFFF";  
    vRect.strokeColor="#000000";  
    var   vShadow=document.createElement("v:shadow");  
    vShadow.on="true";  
    vShadow.type="single";  
    vShadow.color="silver";  
    vShadow.offset="5pt,5pt";  
    vRect.appendChild(vShadow);  
    vGroup.appendChild(vRect);  
   
    VRMLID.appendChild(vGroup);  
  }  
  function   CoordSize()  
  {  
    var   vLineX=document.createElement("v:line");  
    vLineX.from=iCoordSizeStep+","+iCoordSizeStep;  
    vLineX.to=iCoordSizeStep+","+(iCoordSizeY-iCoordSizeStep);  
    var   vStrokeX=document.createElement("v:stroke");  
    vStrokeX.startArrow="classic";  
    vStrokeX.endArrow="oval";  
    vStrokeX.dashStyle="single";  
    vLineX.appendChild(vStrokeX);  
    vGroup.appendChild(vLineX);  
   
    var   vLineY=document.createElement("v:line");  
    vLineY.from=iCoordSizeStep+","+(iCoordSizeY-iCoordSizeStep);  
    vLineY.to=(iCoordSizeX-iCoordSizeStep)+","+(iCoordSizeY-iCoordSizeStep);  
    var   vStrokeY=document.createElement("v:stroke");  
    vStrokeY.startArrow="oval";  
    vStrokeY.endArrow="classic";  
    vStrokeY.dashStyle="single";  
    vLineY.appendChild(vStrokeY);  
    vGroup.appendChild(vLineY);  
  }  
  function   CoordSizeLine()  
  {  
    DrawLinesX(RecordSetArray.length,vGroup);  
    DrawLinesY(RecordSetArray.length,vGroup);  
  }  
  function   RandColor()  
  {  
    return   "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";  
  }  
  function   Zoom(iValue)  
  {  
    var   varX=4000;  
    var   varY=4000;  
    vGroup.coordsize=parseInt(varX/iValue)+","+parseInt(varY/iValue);  
  }  
  </script>  
  <center>  
  <input   type="button"   value="初始设置"   οnclick="InitVRML();">  
  <input   type="button"   value="柱状图"   οnclick="Bar(RecordSetArray.length);">  
  <input   type="button"   value="饼图"   οnclick="Circle(RecordSetArray.length);">  
  <input   type="button"   value="折线图"   οnclick="Line(RecordSetArray.length)">  
  <select   οnchange="Zoom(this.value)">  
      <option   value="0.2"   selected>20%</option>  
      <option   value="0.25">25%</option>  
      <option   value="0.4">40%</option>  
      <option   value="0.5">50%</option>  
      <option   value="0.75">75%</option>  
      <option   value="0.8">80%</option>  
      <option   value="1">原始大小</option>  
      <option   value="1.25">125%</option>  
      <option   value="1.5">150%</option>  
      <option   value="2">200%</option>  
      <option   value="3">300%</option>  
      <option   value="4">400%</option>  
  </select>  
  <br>  
  <br>  
  <div   id=VRMLID></div>  
  </center>  
  </body>  
   
  </html>

yfly13
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VML（js封装类 统计图代码）
08-17
由于VML使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间并声明处理函数，就可以和其他HTML元素一样使用VML元素，在客户端浏览器显示图像。 在此，将制作统计图的VML代码做成js类。供大家调用和参考。
在网页中利用VML画图
11-13
在web页面通过vml画图，如显示cpu使用率，内存使用率等等，动态绘制曲线和图形
VML+JSP
卧龙的专栏
05-31 1703
----index.jsp吾之画v/:*{behavior:url(#default#VML);}o/:*{behavior:url(#default#VML);}System.out.println("----------");mycos mc=new mycos();String pains=mc.pain(100,300,150,mc.myangdegs,mc.values,mc.m
VML 画统计 柱状、饼图、折线
威尔软件
03-22 120
&lt;!-- --&gt;&lt;!-- 涉及文件 alt.js / function.asp--&gt;&lt;!-- 必须包含页面所有代码 --&gt;&lt;!-- 高度定义有待改进 chart_top --&gt; &lt;html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:o...
第一个VML网页实例
问道-正确认识人生的规律，只有从人生的规律中才能求得实实在在的名与利
02-22 1765
hello vml!!!v/:*{behavior:url(#default#VML);}第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：  包含内容 请你务必仔细分析上边的代码，不难看出编写VML标记的高度自由性（大小写、与HTML结合、与CSS结合……）。不但支持传统HTML的2D顺序输出结构（一个对象紧跟一个对象），以及3D输出（通过CSS的样式修改position:
VML 画图 统计图、柱状图、饼图、折线图（部分具有交互性）
03-06 125
VML 画图 统计图、柱状图、饼图、折线图（部分具有交互性） 有兴趣的可以一起探讨一下！ 以下部分是收集整理的 演示：http://www.microsystem.cn/vmlchart/vml.htm 演示：http://www.microsystem.cn...
vml+javascript动态生成柱状图、饼图、折线图
sunhongruihuifeideyu的专栏
11-10 574
 
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一个基于SVG/VML/Canvas的高性能、跨浏览器、跨平台的图表库，支持多种图表类型，如折线图、柱状图、饼图、散点图等。它提供了一套完整的API和交互设计，使得开发者能够方便地进行图表配置和定制，实现...
vml绘画的柱状图，饼图，折线图
08-13
使用Vml绘制的柱状图，饼图，折线图，功能强大，可以满足一般的绘制需求！
js 封装VML的饼图，柱状图，折线图
09-17
在这个特定的案例中，我们讨论的是如何使用JavaScript封装VML（Vector Markup Language）来绘制饼图、柱状图和折线图。VML是一种矢量图形格式，允许在IE浏览器中创建和展示复杂的图形，特别是在不支持SVG（Scalable ...
asp结合VML写的柱状图,饼图,折线图(注:asp+VML)
03-02
给出部分代码: '画X柱子 dim PolyLine1,PolyLine2 For i = 1.5 To uboundY+1 'step 0.5 xRect = (i-1)*allX\uboundY height1 = -allY * arr(1,int(i)) / arrMax height2 = -allY * arr(2,int(i)) / arrMax ...
VML 画图 统计图、柱状图、饼图、折线图
07-25
在"VML 画图 统计图、柱状图、饼图、折线图 Powered by MicroSystem_cn.mht"这个文件中，很可能是提供了一个使用VML实现这些图形的示例，包括具体的代码和展示效果。通过查看这个文件，你可以深入学习如何在不支持...
用asp+vml实现的立体统计图（一）-----柱状图
hq0927的专栏
05-28 510
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　┃ ┃ 摘　要： 统计图--直方图　　 　　　　　　　　　　　　　　　　 ┃ ┃ 作　者： 翁云兵　　　　　　　　　　　　　　　　　　　　　　　┃ ┃ 创建日期：2004年11月5日　　　　　　　　　　　　　　　　　　 ┃ ┃ 完成日期：2004年11月5
前端实现饼图、堆叠柱状图、折线图
WYN的养生之路的博客
08-22 1123
我觉得根据框架的API，就能够修改样式，得到你想要的结果，灵活运用就好。 这两天做了’带图例还百分比的饼图‘，‘堆叠状的柱状图’，‘折线图’。 我使用的是highcharts这个框架，我觉得还是不错的，有详细的介绍和api。 另外，我在查资料的过程中，还发现的图表类的框架有jfreechart,   echarts.以后可以尝试使用。 1，饼图   &lt;pre name="cod...
1.5-协程基础与关键知识：连接线程的世界-回调型 API 协作
最新发布
Vincent的博客
07-14 379
将线程 API 的回调式代码用 suspendCoroutine 或 suspendCancellableCoroutine 包住，就能实现将回调式代码转换为挂起函数在协程执行，需要调用提供的 continuation.resume 和 continuation.resumeWithException 分别处理正常返回结果和异常的情况。
JavaScript实现 折线图、饼图、柱状图.doc
06-09
"该文档提供了一种使用JavaScript实现折线图、饼图和柱状图的方法。通过JavaScript函数table2，可以创建这些图表，适用于数据可视化的需求。文档中包含具体的代码示例，以折线图为例，展示了如何处理数据、计算最大...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值