以前收集的VML实现的饼图vml_pie.html,感谢提供该代码的前辈,现将代码分享,代码如下:
-
<htmlxmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office">
- <head>
- <title></title>
-
<metaname="GENERATOR"content="MicrosoftVisualStudio.NET7.1">
-
<metaname="ProgId"content="VisualStudio.HTML">
-
<metaname="Originator"content="MicrosoftVisualStudio.NET7.1">
-
<STYLE>v/:*{BEHAVIOR:url(#default#VML)}
-
o/:*{BEHAVIOR:url(#default#VML)}
-
.shape{BEHAVIOR:url(#default#VML)}
- </STYLE>
-
<scriptlanguage="javascript">
- functionAdd(){
-
varshape=document.createElement("v:shape");
-
shape.type="#tooltipshape";
-
shape.style.width="150px";
-
shape.style.height="150px";
-
shape.coordsize="21600,21600";
-
shape.fillcolor="infobackground";
-
vartextbox=document.createElement("v:textbox");
-
textbox.style.border="1pxsolidred";
-
textbox.style.innerHTML="测试";
- shape.appendChild(textbox);
- document.body.appendChild(shape);
- }
- functionVMLPie(pContainer,pWidth,pHeight,pCaption){
-
this.Container=pContainer;
-
this.Width=pWidth||"400px";
-
this.Height=pHeight||"250px";
-
this.Caption=pCaption||"VMLChart";
-
this.backgroundColor="";
-
this.Shadow=false;
-
this.BorderWidth=0;
-
this.BorderColor=null;
-
this.all=newArray();
-
this.RandColor=function(){
-
return"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
- }
-
this.VMLObject=null;
- }
- VMLPie.prototype.Draw=function(){
-
-
varo=document.createElement("v:group");
-
o.style.width=this.Width;
-
o.style.height=this.Height;
-
o.coordsize="21600,21600";
-
-
varvRect=document.createElement("v:rect");
-
vRect.style.width="21600px"
-
vRect.style.height="21600px"
- o.appendChild(vRect);
-
varvCaption=document.createElement("v:textbox");
-
vCaption.style.fontSize="24px";
-
vCaption.style.height="24px"
-
vCaption.style.fontWeight="bold";
-
vCaption.innerHTML=this.Caption;
-
vCaption.style.textAlign="center";
- vRect.appendChild(vCaption);
-
-
if(this.BorderWidth){
-
vRect.strokeweight=this.BorderWidth;
- }
-
-
if(this.BorderColor){
-
vRect.strokecolor=this.BorderColor;
- }
-
-
if(this.backgroundColor){
-
vRect.fillcolor=this.backgroundColor;
- }
-
-
if(this.Shadow){
-
varvShadow=document.createElement("v:shadow");
-
vShadow.on="t";
-
vShadow.type="single";
-
vShadow.color="graytext";
-
vShadow.offset="4px,4px";
- vRect.appendChild(vShadow);
- }
-
this.VMLObject=o;
-
this.Container.appendChild(o);
-
-
varoOval=document.createElement("v:oval");
-
oOval.style.width="15000px";
-
oOval.style.height="14000px";
-
oOval.style.top="4000px";
-
oOval.style.left="1000px";
-
oOval.fillcolor="#d5dbfb";
-
-
-
varformatStyle='<v:fillrotate="t"angle="-135"focus="100%"type="gradient"/>';
-
-
-
-
formatStyle+='<o:extrusionv:ext="view"backdepth="1in"on="t"viewpoint="0,34.72222mm"viewpointorigin="0,.5"skewangle="90"lightposition="-50000"lightposition2="50000"type="perspective"/>';
- oOval.innerHTML=formatStyle;
- o.appendChild(oOval);
-
this.CreatePie(o);
- }
- VMLPie.prototype.CreatePie=function(vGroup){
- varmX=Math.pow(2,16)*360;
-
-
-
-
-
-
- varvTotal=0;
- varstartAngle=0;
- varendAngle=0;
- varpieAngle=0;
- varprePieAngle=0;
-
varobjRow=null;
-
varobjCell=null;
-
for(i=0;i<this.all.length;i++){
-
vTotal+=this.all[i].Value;
- }
-
varobjLegendRect=document.createElement("v:rect");
-
varobjLegendTable=document.createElement("table");
- objLegendTable.cellPadding=0;
- objLegendTable.cellSpacing=3;
-
objLegendTable.width="100%";
- with(objLegendRect){
-
style.left="17000px";
-
style.top="4000px";
-
style.width="4000px";
-
style.height="12000px";
-
fillcolor="#e6e6e6";
-
strokeweight="1px";
- }
- objRow=objLegendTable.insertRow();
- objCell=objRow.insertCell();
-
objCell.colSpan="2";
-
-
objCell.style.backgroundColor="black";
-
objCell.style.padding="5px";
-
objCell.style.color="window";
-
objCell.style.font="caption";
-
objCell.innerText="总数:"+vTotal;
-
varvTextbox=document.createElement("v:textbox");
- vTextbox.appendChild(objLegendTable);
- objLegendRect.appendChild(vTextbox);
-
varvShadow=document.createElement("v:shadow");
-
vShadow.on="t";
-
vShadow.type="single";
-
vShadow.color="graytext";
-
vShadow.offset="2px,2px";
- objLegendRect.appendChild(vShadow);
- vGroup.appendChild(objLegendRect);
-
varstrAngle="";
-
for(i=0;i<this.all.length;i++){
-
varvPieEl=document.createElement("v:shape");
- varvPieId=document.uniqueID;
-
vPieEl.style.width="15000px";
-
vPieEl.style.height="14000px";
-
vPieEl.style.top="4000px";
-
vPieEl.style.left="1000px";
-
vPieEl.coordsize="1500,1400";
-
vPieEl.strokecolor="white";
- vPieEl.id=vPieId;
-
pieAngle=this.all[i].Value/vTotal;
- startAngle+=prePieAngle;
- prePieAngle=pieAngle;
- endAngle=pieAngle;
-
-
vPieEl.path="M750700AE750700750700"+parseInt(mX*startAngle)+""+parseInt(mX*endAngle)+"xe";
-
vPieEl.title=this.all[i].Name+"/n所占比例:"+endAngle*100+"%/n详细描述:"+this.all[i].TooltipText;
-
-
varobjFill=document.createElement("v:fill");
-
objFill.rotate="t";
-
objFill.focus="100%";
-
objFill.type="gradient";
- objFill.angle=parseInt(360*(startAngle+endAngle/2));
- vPieEl.appendChild(objFill);
-
varobjTextbox=document.createElement("v:textbox");
-
objTextbox.border="1pxsolidblack";
-
objTextbox.innerHTML=this.all[i].Name+":"+this.all[i].Value;
-
-
varvColor=this.RandColor();
-
vPieEl.fillcolor=vColor;
-
- objRow=objLegendTable.insertRow();
-
objRow.style.height="16px";
-
varobjColor=objRow.insertCell();
- objColor.style.backgroundColor=vColor;
-
objColor.style.width="16px";
- objColor.PieElement=vPieId;
-
objColor.attachEvent("onmouseover",LegendMouseOverEvent);
-
objColor.attachEvent("onmouseout",LegendMouseOutEvent);
-
-
- objCell=objRow.insertCell();
-
objCell.style.font="icon";
-
objCell.style.padding="3px";
-
objCell.innerText=this.all[i].Name+":"+this.all[i].Value;
- vGroup.appendChild(vPieEl);
- }
- }
- VMLPie.prototype.Refresh=function(){
- }
- VMLPie.prototype.Zoom=function(iValue){
- varvX=21600;
- varvY=21600;
-
this.VMLObject.coordsize=parseInt(vX/iValue)+","+parseInt(vY/iValue);
- }
- VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){
-
varoData=newObject();
- oData.Name=sName;
- oData.Value=sValue;
- oData.TooltipText=sTooltipText;
-
variCount=this.all.length;
-
this.all[iCount]=oData;
- }
- VMLPie.prototype.Clear=function(){
-
this.all.length=0;
- }
- functionLegendMouseOverEvent(){
-
vareSrc=window.event.srcElement;
-
eSrc.border="1pxsolidblack";
- }
- functionLegendMouseOutEvent(){
-
vareSrc=window.event.srcElement;
-
eSrc.border="";
- }
-
varobjPie=null;
-
- functionDrawPie(){
-
objPie=newVMLPie(document.body,"600px","450px","人口统计图");
-
-
-
-
-
objPie.backgroundColor="#ffffff";
-
objPie.Shadow=true;
-
objPie.AddData("北京",10,"北京的人口");
-
objPie.AddData("上海",52,"上海的固定人口");
-
objPie.AddData("天津",30,"天津的外地人口");
-
objPie.AddData("西安",58,"西安城市人口");
-
objPie.AddData("武汉",30,"武汉的外地人口");
-
objPie.AddData("重庆",58,"重庆城市人口");
- objPie.Draw();
-
- }
- </script>
- </head>
-
<bodyonload="DrawPie()">
-
<v:shapetypeid="tooltipshape"coordsize="21600,21600"o:spt="106"path="ar0,7165,4345,13110,1950,7185,1080,12690at475,11732,4835,17650,1080,12690,2910,17640at2387,9757,10107,20300,2910,17640,8235,19545at7660,12382,14412,21597,8235,19545,14280,18330at12910,11080,18695,18947,14280,18330,18690,15045at14822,5862,21597,15082,18690,15045,20895,7665at15772,2592,21105,9865,20895,7665,19140,2715at14330,0,19187,6595,19140,2715,14910,1170at10992,0,15357,5945,14910,1170,11250,1665at6692,650,12025,7917,11250,1665,7005,2580at1912,1972,8665,11162,7005,2580,1950,7185xear0,7165,4345,13110,1080,12690,2340,13080nfear475,11732,4835,17650,2910,17640,3465,17445nfear7660,12382,14412,21597,7905,18675,8235,19545nfear7660,12382,14412,21597,14280,18330,14400,17370nfear12910,11080,18695,18947,18690,15045,17070,11475nfear15772,2592,21105,9865,20175,9015,20895,7665nfear14330,0,19187,6595,19200,3345,19140,2715nfear14330,0,19187,6595,14910,1170,14550,1980nfear10992,0,15357,5945,11250,1665,11040,2340nfear1912,1972,8665,11162,7650,3270,7005,2580nfear1912,1972,8665,11162,1950,7185,2070,7890nfem@23@37qx@35@24@23@36@34@24@23@37xem@16@33qx@31@17@16@32@30@17@16@33xem@38@29qx@27@39@38@28@26@39@38@29xe"
-
adj="1350,25920">
- <v:formulas>
-
<v:feqn="sum#0010800"></v:f>
-
<v:feqn="sum#1010800"></v:f>
-
<v:feqn="cosatan210800@0@1"></v:f>
-
<v:feqn="sinatan210800@0@1"></v:f>
-
<v:feqn="sum@2108000"></v:f>
-
<v:feqn="sum@3108000"></v:f>
-
<v:feqn="sum@40#0"></v:f>
-
<v:feqn="sum@50#1"></v:f>
-
<v:feqn="mod@6@70"></v:f>
-
<v:feqn="prod600111"></v:f>
-
<v:feqn="sum@80@9"></v:f>
-
<v:feqn="prod@1013"></v:f>
-
<v:feqn="prod60031"></v:f>
-
<v:feqn="sum@11@120"></v:f>
-
<v:feqn="prod@13@6@8"></v:f>
-
<v:feqn="prod@13@7@8"></v:f>
-
<v:feqn="sum@14#00"></v:f>
-
<v:feqn="sum@15#10"></v:f>
-
<v:feqn="prod60081"></v:f>
-
<v:feqn="prod@1121"></v:f>
-
<v:feqn="sum@18@190"></v:f>
-
<v:feqn="prod@20@6@8"></v:f>
-
<v:feqn="prod@20@7@8"></v:f>
-
<v:feqn="sum@21#00"></v:f>
-
<v:feqn="sum@22#10"></v:f>
-
<v:feqn="prod60021"></v:f>
-
<v:feqn="sum#06000"></v:f>
-
<v:feqn="sum#00600"></v:f>
-
<v:feqn="sum#16000"></v:f>
-
<v:feqn="sum#10600"></v:f>
-
<v:feqn="sum@16@250"></v:f>
-
<v:feqn="sum@160@25"></v:f>
-
<v:feqn="sum@17@250"></v:f>
-
<v:feqn="sum@170@25"></v:f>
-
<v:feqn="sum@23@120"></v:f>
-
<v:feqn="sum@230@12"></v:f>
-
<v:feqn="sum@24@120"></v:f>
-
<v:feqn="sum@240@12"></v:f>
-
<v:feqn="sum#000"></v:f>
-
<v:feqn="sum#100"></v:f>
- </v:formulas>
-
<v:patho:connectlocs="67,10800;10800,21577;21582,10800;10800,1235;@38,@39"o:extrusionok="f"
-
o:connecttype="custom"textboxrect="2977,3262,17087,17337"></v:path>
- <v:handles>
-
<v:hposition="#0,#1"></v:h>
- </v:handles>
-
<o:complexv:ext="view"></o:complex>
- </v:shapetype>
-
<selectid="zoom"onchange="objPie.Zoom(this.value)">
-
<optionvalue="0.2"selected=true>20%</option>
-
<optionvalue="0.25">25%</option>
-
<optionvalue="0.4">40%</option>
-
<optionvalue="0.5">50%</option>
-
<optionvalue="0.75">75%</option>
-
<optionvalue="0.8">80%</option>
-
<optionvalue="1">原始大小</option>
-
<optionvalue="1.25">125%</option>
-
<optionvalue="1.5">150%</option>
-
<optionvalue="2">200%</option>
-
<optionvalue="3">300%</option>
-
<optionvalue="4">400%</option>
- </select>
- </body>
- </html>
分享到:
相关推荐
js 封装VML的饼图,柱状图,折线图,里面有例子。
VML饼图,PHP版。 VML只有IE支持。 演示: http://www.liuyuanjun.com/test/chart0.php
js_vml_饼图__柱状图_曲线图,用JS制作
VML生成3D饼图 此程序使用VML和JavaScript根据传入的数据生成一定比例的3D饼图,支持单块饼的浮动效果
VML 柱状图 饼图 线形图
用vml画饼状图用vml画饼状图用vml画饼状图用vml画饼状图
利用微软的VML来实现3D的饼图效果,非常COOL
给予vml的一个统计饼图,非常漂亮,支持动作
SVG,VML,FLASH三种实现统计饼图的方式比较.pdf
此程序使用VML和JavaScript根据传入的数据生成一定比例的3D饼图,支持单块饼的浮动效果
纯asp使用vml绘线柱饼图,很....................................
vml绘线柱饼图...................................................
VML 画图 统计图、 柱状图、 饼图、 折线图
javascript 直接生成的柱图,饼图,曲线图。
使用Vml绘制的柱状图,饼图,折线图,功能强大,可以满足一般的绘制需求!
柱状图和饼图js代码两例
使用asp制作直方图、饼图 VML 画统计 柱状、饼图、折线 Powered by MicroSystem.cn
ASP与VML生成图表的示例,ASP结合VML抓取数据后生成 饼图 柱图 折线等图表的示例程序
给出部分代码: '画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 ...
asp\asp.net统计图VML(asp版加asp.net版,含饼图、曲线图、柱图)。非常实用。