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

原创 2004年07月07日 16:14:00

<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 onload="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="初始设置" onclick="InitVRML();">
<input type="button" value="柱状图" onclick="Bar(RecordSetArray.length);">
<input type="button" value="饼图" onclick="Circle(RecordSetArray.length);">
<input type="button" value="折线图" onclick="Line(RecordSetArray.length)">
<select onchange="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>

VML数据图表

"urn:schemas-microsoft-com:office:office">实战VML数据图表v/:* { BEHAVIOR: url(#default#VML)}o/:* { BEHAVIO...
  • 21aspnet
  • 21aspnet
  • 2007-03-22 22:36:00
  • 3225

java 生成图表(柱形图、折线图、饼图)

可参考: http://blog.csdn.net/zyb_java/article/details/22291473 https://www.cnblogs.com/newwind/p/56...
  • chenyuangege
  • chenyuangege
  • 2018-01-09 14:04:48
  • 578

flex_amcharts

  • 2013年04月08日 21:51
  • 17.23MB
  • 下载

数据可视化:柱状图、折线图、饼图等六种基本图表的特点及适用场合

图表是”数据可视化”的常用手段,其中又以基本图表—-柱状图、折线图、饼图等等—-最为常用。 一、柱状图(Bar Chart) 柱状图是最常见的图表,也最容易解读。 它的适用场合是二维数据...
  • caixiajia
  • caixiajia
  • 2017-02-24 10:54:15
  • 5191

delphi做的图表显示系统 可以根据数据显示直方图 饼图 和折线图

  • 2008年07月01日 19:20
  • 544KB
  • 下载

raphaelJS制作图表、饼图、柱状图、曲线图

  • 2013年04月27日 11:08
  • 61KB
  • 下载

ASP与VML生成图表的示例

  • 2008年10月31日 14:04
  • 45KB
  • 下载

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图(下)

首先,这里有个g.raphael.js的范例文章,可以直接看,我就不转载了: http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-jav...
  • sinolzeng
  • sinolzeng
  • 2014-12-10 11:23:05
  • 4375

html,css实现各式各样的炫酷图表,折线图,柱形图(2D、3D)饼图.....

  • 2016年01月29日 11:32
  • 308KB
  • 下载

第十章 BIRT图表 .

10.1 图表的选择数据 新建报表overall.rptdesign,选择空白报表模板,完成后如图10-1, 新建数据源MyDataSource,采用BIRT设计器自带的例子数据库...
  • z1012890225
  • z1012890225
  • 2014-07-15 15:07:39
  • 919
收藏助手
不良信息举报
您举报文章:用VML做的图表分析(包括柱图,饼图和折线图)
举报原因:
原因补充:

(最多只允许输入30个字)