<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<STYLE>v\:* { BEHAVIOR: url(#default#VML) }
o\:* { BEHAVIOR: url(#default#VML) }
.shape { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="javascript">
function Add(){
var shape=document.createElement("v:shape");
shape.type="#tooltipshape";
shape.style.width="150px";
shape.style.height="150px";
shape.coordsize="21600,21600";
shape.fillcolor="infobackground";
var textbox=document.createElement("v:textbox");
textbox.style.border="1px solid red";
textbox.style.innerHTML="测试";
shape.appendChild(textbox);
document.body.appendChild(shape);
}
function VMLPie(pContainer,pWidth,pHeight,pCaption){
this.Container=pContainer;
this.Width= pWidth || "400px";
this.Height=pHeight || "250px";
this.Caption = pCaption || "VML Chart";
this.backgroundColor="";
this.Shadow=false;
this.BorderWidth=0;
this.BorderColor=null;
this.all=new Array();
this.RandColor=function(){
return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
}
VMLPie.prototype.Draw=function(){
//画外框
var o=document.createElement("v:group");
o.style.width=this.Width;
o.style.height=this.Height;
o.coordsize="21600,21600";
//添加一个背景层
var vRect=document.createElement("v:rect");
vRect.style.width="21600px"
vRect.style.height="21600px"
o.appendChild(vRect);
var vCaption=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){
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="4px,4px";
vRect.appendChild(vShadow);
}
this.Container.appendChild(o);
//开始画内部园
var oOval=document.createElement("v:oval");
oOval.style.width="15000px";
oOval.style.height="14000px";
oOval.style.top="4000px";
oOval.style.left="1000px";
oOval.fillcolor="#d5dbfb";
//本来计划加入3D的效果，后来感觉确实不好控制，就懒得动手了
//var o3D=document.createElement("o:extrusion");
var formatStyle=' <v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';
//formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';
//formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';
//formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';
formatStyle+='<o:extrusion v: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){
var mX=Math.pow(2,16) * 360;
//这个参数是划图形的关键
//AE x y width height startangle endangle
//x y表示圆心位置
//width height形状的大小
//startangle endangle的计算方法如下
// 2^16 * 度数
var vTotal=0;
var startAngle=0;
var endAngle=0;
var pieAngle=0;
var prePieAngle=0;
var objRow=null;
var objCell=null;
for(i=0;i<this.all.length;i++){
vTotal+=this.all[i].Value;
}
var objLegendRect=document.createElement("v:rect");
var objLegendTable=document.createElement("table");
objLegendTable.cellPadding=0;
objLegendTable.cellSpacing=5;
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.border="1px outset";
objCell.style.backgroundColor="black";
objCell.style.padding="5px";
objCell.style.color="window";
objCell.style.font="caption";
objCell.innerText="总数:"+vTotal;
var vTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(vTextbox);
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow);
vGroup.appendChild(objLegendRect);
var strAngle="";
for(i=0;i<this.all.length;i++){ //顺序的划出各个饼图
var vPieEl=document.createElement("v:shape");
var vPieId=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;
//strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +" End:"+ endAngle +"\n";
vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
vPieEl.title=this.all[i].Name +"\n所占比例:"+ endAngle * 100 +"%\n详细描述:" +this.all[i].TooltipText;
//vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';
var objFill=document.createElement("v:fill");
objFill.rotate="t";
objFill.focus="100%";
objFill.type="gradient";
objFill.angle=parseInt( 360 * (startAngle + endAngle /2));
vPieEl.appendChild(objFill);
var objTextbox=document.createElement("v:textbox");
objTextbox.border="1px solid black";
objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;
//vPieEl.appendChild(objTextbox);
var vColor=this.RandColor();
vPieEl.fillcolor=vColor; //设置颜色
//开始画图例
objRow=objLegendTable.insertRow();
objCell=objRow.insertCell();//颜色标记
objCell.style.backgroundColor=vColor;
objCell.style.width="16px";
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.AddData=function(sName,sValue,sTooltipText){
var oData=new Object();
oData.Name=sName;
oData.Value=sValue;
oData.TooltipText=sTooltipText;
var iCount=this.all.length;
this.all[iCount]=oData;
}
VMLPie.prototype.Clear=function(){
this.all.length=0;
}
//以下是函数调用
function DrawPie(){
var objPie=new VMLPie(document.body,"600px","450px","人口统计图");
//objPie.BorderWidth=3;
//objPie.BorderColor="blue";
//objPie.Width="800px";
//objPie.Height="600px";
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>
<body onload="DrawPie()">
</body>
</html>
分享到：
相关推荐
在这个"asp+vml图表 饼状图示例"中，我们将探讨如何利用这两项技术来生成动态的数据图表。 首先，VML是一种基于XML的语言，它允许在网页上绘制复杂的图形，包括线条、曲线、形状以及我们关注的饼状图。VML的优点...
vml实现的柱状图，饼状图，很绚丽，不需要其他东西支持，易用
vml 实现的饼状图直接调用即可，无须任何处理，快速构建报表
本文将深入探讨如何在ASP.NET中利用VML技术创建柱状图和饼状图，同时提供一个超级轻量级的示例。 VML是一种基于XML的矢量图形语言，它允许在HTML页面中创建和显示复杂的图形。在ASP.NET中，我们可以利用服务器端...
例如，如果饼状图依赖canvas元素，而IE8及更早版本不支持canvas，可以考虑使用Flash或VML作为替代方案。 压缩包内的“jiaoben3109”可能是一个示例代码文件或者包含了实现饼状图的源代码。为了充分利用这个资源，你...
JavaScript 和 VML（Vector Markup Language）技术在网页中创建统计图表是一种早期的解决方案，尤其在SVG（Scalable Vector Graphics）在所有现代浏览器得到广泛支持之前。本教程将深入探讨如何利用这两种技术来构建...
在"asp+vml(2版)"这个压缩包中，很可能是包含了使用VML和ASP结合创建统计图的示例代码或者教程。这些资源可以帮助开发者了解如何在不依赖额外JavaScript库或插件的情况下，利用服务器端的ASP技术来生成统计图形。 ...
这是一款VML编写的图形控件，支持VS2005，可以显示柱状、饼状、线状等各种图形格式，希望有所帮助！！
这篇博客“初识Raphaël做饼图及折线图”将引导我们了解如何利用Raphaël库来制作饼图和折线图，这两个是数据可视化中常见的图表类型。 首先，让我们详细了解饼图。饼图是一种展示数据比例关系的图形，每个扇区代表...
接着，通过JavaScript代码设置数据源，数据源通常是一个对象数组，每个对象包含值（value）和标签（label）两个属性，表示饼状图的各个部分。例如： ```javascript var data = [ { value: 30, label: '数据1' }, ...
在本文中，我们将深入探讨如何使用JavaScript进行图形绘制，特别是柱状图、饼状图和折线图的创建。 首先，我们要知道JavaScript本身并不直接支持图形绘制。但是，借助于SVG（Scalable Vector Graphics）或VML...
ECharts是百度开源的一款图表库，它支持SVG和VML渲染，兼容大部分现代浏览器。在项目中引入ECharts库，可以通过CDN链接或者下载本地库文件，然后在HTML文件中添加script标签进行引用。 ```html ...
ASP+ACCESS 动态数据与棒图、饼图、折线图等显示 图像随数据自动变化，静态变化也有。简单实用。FaultChart_Y.asp动态，Chartindex.asp静态图像。欢迎下载，效果自己还可以调。发到IIS里就可用。
Highstock-2.1.5是一款强大的图表统计插件，主要应用于数据可视化，提供线形图、饼状图、柱状图等多种图表类型，适用于各种数据分析和展示需求。这款插件是Highcharts库的一个扩展版本，特别针对股票市场数据进行了...
HighCharts.js是一款强大的JavaScript图表库，专用于创建各种交互式的数据可视化图表，如饼状图、柱状图、线图、区域图、散点图、热力图等。这款库在Web开发中广泛使用，特别是在需要展示复杂数据或统计数据的场合，...
Morris.js是一款基于JavaScript的图表绘制库，特别适用于创建折线图、饼状图和柱状图等数据可视化图表。这个"morris.js-master.zip"压缩包文件包含了完整的Morris.js源码及其相关资源，方便开发者在自己的项目中集成...
此外，Highcharts支持的图表类型非常丰富，如“描述”中所述，包括直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图和瀑布流图等。这些图表类型可以单独使用，也可以混合在一起，形成混合图，以...
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。 兼容性 Highcharts 可以在所有的...