用VML做的图表分析(包括柱图,饼图和折线图)

最新推荐文章于 2020-11-16 15:29:31 发布
最新推荐文章于 2020-11-16 15:29:31 发布
阅读量2.7k 收藏
点赞数
分类专栏： 经我试练的秘籍 文章标签： function button microsoft input generator object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjd111686/article/details/36245
版权

<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>

gjd111686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ASP+VML技术打造一款漂亮的统计图表
07-03
ASP+VML技术打造一款漂亮的统计图表；ASP+VML技术打造一款漂亮的统计图表；
VML数据图表
无界编程
03-22 3988
"urn:schemas-microsoft-com:office:office">实战VML数据图表v/:* { BEHAVIOR: url(#default#VML)}o/:* { BEHAVIOR: url(#default#VML)}.shape { BEHAVIOR: url(#default#VML)}TD { FONT-SIZE: 9pt}打印   &nbsp
VML 实现 图表（柱形图、折线图）
炯炯的专栏
04-12 964
//线形图function Linear() { this.values = {}; //横坐标序号对应值(JSON格式) values[{ num: 1, name: 大地, value: 6 }]value--线形纵向值 num--对应横向序号 name--横向序号对应名称 this.strokeweight = 1; this.st
VML 学习笔记
荔枝小站
05-11 3288
观看者：有xml，javascript基础的同学 目标：熟练掌握vml 实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了，所以vml到2011年12月已经归
asp vml制作统计曲线图表
04-11
asp vml制作统计曲线图表 ，很飘亮，很实用和修改
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
ASP生成柱型体，折线图，饼图源代码
10-31
在上述内容中，我们看到的是一段ASP代码，用于生成柱型图、折线图和饼图。这些图形通常用于数据可视化，帮助用户更直观地理解数据。 柱型图是一种以矩形的长度表示数值大小的统计图表，每个矩形代表一个分类，矩形...
VML 画图 统计图、柱状图、饼图、折线图
07-25
在"VML 画图 统计图、柱状图、饼图、折线图 Powered by MicroSystem_cn.mht"这个文件中，很可能是提供了一个使用VML实现这些图形的示例，包括具体的代码和展示效果。通过查看这个文件，你可以深入学习如何在不支持...
初识raphael做饼图及折线图
08-03
这篇博客“初识Raphaël做饼图及折线图”将引导我们了解如何利用Raphaël库来制作饼图和折线图，这两个是数据可视化中常见的图表类型。 首先，让我们详细了解饼图。饼图是一种展示数据比例关系的图形，每个扇区代表...
vml js 折线图
08-28
三维折现图 从三维折现asp例子把过来的
vml曲线走势图走势图走势图走势图
10-23
vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图
vml导出矢量图到excel
12-10
将输出在页面上的vml图 导出到excel 中的矢量图 可在excel中编辑
利用vml制作统计图全攻略----饼图的制作（一）
zgqtxwd的专栏
04-24 428
利用vml制作统计图全攻略----饼图的制作          作者：蓝翼  CSDN账号:liuruhong(蓝色街灯)电子邮件： liuruhong@263.net   MSN: blueswing_liu@hotmail.com 关键字: vml Javascript OOP 统计图提要：    vml是Microsoft IE 5.0及其后续版本内嵌的矢量图形实现，虽
VML折线图(一)
FlySpace随笔
06-20 2914
       本例针对某工厂某两种产品的月产量，应用VML技术在浏览器客户区内绘制简单的产量走势图。       本例主要用到的VML元素主要有： 组合图形，确立图形坐标系。 自定义元素类型。 确立绘图区间。  绘制路径。 计算表达式。 显示文字。        下面是本例用到的数据：月份12345
[原创]利用javascript + VML在网页中实现折线图
ybbqy的专栏
12-11 2140
作者:ybbqy欢迎访问ybbqy的BLOG ：http://blog.csdn.net/ybbqy言规正传：    今天的主题就是在网页上画图！    网页上画图？文本描述的HTTP浏览感觉很悬吧？其实网上已经有很多相关的技术，我这里就用VML来实现。(注：VML目前只被IE6.0下支持，并且微软也将打算不再支持VML，这里只作抛砖引玉，相信认真的读者会做到举一反三。想实用、兼容性好，建议还是在
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
jishublog
09-16 209
本来想自己做个库的，毅力不够啊，所以放出源代码 当前实现的框架功能有： 1. 支持IE6+以上版本，支持Chrome， 支持FireFox 2. 动画加载机制 3. tooltip支持 4. legend支持 5. 功能丰富的参数设置 当前支持的图形种类有两种：饼图与折线图，将来也许会不定期更新，不断完善！ 希望还有点毅力和时间做话。不废话啦，直接上效果图： 折线图演示代码：...
cesium获取模型高度_Cesium中地形数据的加载
weixin_39710295的博客
11-16 1075
Cesium开发中，如果想要看到真实感，地形数据(DEM)不可或缺。但是很多非GIS专业的人，对地形数据的定位不清晰，不明白地形数据如何展示。最近很多人问我这个问题，综合看下来，主要问题就集中在地形数据是什么？怎么才能展示出来，看到地形？在这里我就将这两个问题一一解答。首先，地形数据是什么？拿DEM数据来说，DEM数据就是数字高程模型，就是描述每个点位的高程数据而已，没有其他附加信息，更不会包含影...
VML画柱状图、并图、折线图的封装
weixin_30732487的博客
05-08 92
/*3D统计图绘图类功能：根据表格数据绘制统计图作者：LiuZXIT完成：2003/9/10备注：在IE6下测试成功局限性：1.只能针对于单一二维行列式规则TABLE进行绘制2.TABLE内容必须有左标题和上标题，并且右下部分都必须是数据区不足：没有支持动态定制数据源，例如用一个XML数据包，有些文字太长会出现显示不好注意点：1.htm页面必需包含以下内容&...
JavaScript实现 折线图、饼图、柱状图.doc
06-09
JavaScript实现 折线图、饼图、柱状图

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值