ASP里怎么画坐标图和饼壮图统计数据????

weiyanlover 2005-12-17 08:52:08
ASP里怎么画坐标图和饼壮图统计数据????帮帮忙想想，我有急用，最近一两天就要解决这个问题
...全文
190 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
dsclub 2005-12-18
  • 打赏
  • 举报
 回复
vml
ytzz 2005-12-18
  • 打赏
  • 举报
 回复
mark
wojiaogyp 2005-12-18
  • 打赏
  • 举报
 回复
mark
wowoni 2005-12-17
  • 打赏
  • 举报
 回复


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();
objRow.style.height="16px";

var objColor=objRow.insertCell();//颜色标记
objColor.style.backgroundColor=vColor;
objColor.style.width="16px";

objColor.PieElement=vPieId;
objColor.attachEvent("onmouseover",LegendMouseOverEvent);
objColor.attachEvent("onmouseout",LegendMouseOutEvent);
//objColor.onmouseover="LegendMouseOverEvent()";
//objColor.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){
var vX=21600;
var vY=21600;
this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
}
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 LegendMouseOverEvent(){

var eSrc=window.event.srcElement;
eSrc.border="1px solid black";
}
function LegendMouseOutEvent(){
var eSrc=window.event.srcElement;
eSrc.border="";
}


var objPie=null;
//以下是函数调用
function DrawPie(){
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("北京",100,"北京的人口");
objPie.AddData("上海",52,"上海的固定人口");
objPie.AddData("天津",30,"天津的外地人口");
objPie.AddData("西安",58,"西安城市人口");
objPie.AddData("武汉",30,"武汉的外地人口");
objPie.AddData("重庆",58,"重庆城市人口");
objPie.Draw();
//alert(document.body.outerHTML);
}

</script>
</head>
<body onload="DrawPie()">
<v:shapetype id="tooltipshape" coordsize="21600,21600" o:spt="106" path=" ar0,7165,4345,13110,1950,7185,1080,12690 at475,11732,4835,17650,1080,12690,2910,17640 at2387,9757,10107,20300,2910,17640,8235,19545 at7660,12382,14412,21597,8235,19545,14280,18330 at12910,11080,18695,18947,14280,18330,18690,15045 at14822,5862,21597,15082,18690,15045,20895,7665 at15772,2592,21105,9865,20895,7665,19140,2715 at14330,0,19187,6595,19140,2715,14910,1170 at10992,0,15357,5945,14910,1170,11250,1665 at6692,650,12025,7917,11250,1665,7005,2580 at1912,1972,8665,11162,7005,2580,1950,7185 x e ar0,7165,4345,13110,1080,12690,2340,13080 nf e ar475,11732,4835,17650,2910,17640,3465,17445 nf e ar7660,12382,14412,21597,7905,18675,8235,19545 nf e ar7660,12382,14412,21597,14280,18330,14400,17370 nf e ar12910,11080,18695,18947,18690,15045,17070,11475 nf e ar15772,2592,21105,9865,20175,9015,20895,7665 nf e ar14330,0,19187,6595,19200,3345,19140,2715 nf e ar14330,0,19187,6595,14910,1170,14550,1980 nf e ar10992,0,15357,5945,11250,1665,11040,2340 nf e ar1912,1972,8665,11162,7650,3270,7005,2580 nf e ar1912,1972,8665,11162,1950,7185,2070,7890 nf e m@23@37 qx@35@24@23@36@34@24@23@37 x e m@16@33 qx@31@17@16@32@30@17@16@33 x e m@38@29 qx@27@39@38@28@26@39@38@29 x e"
adj="1350,25920">
<v:formulas>
<v:f eqn="sum #0 0 10800 "></v:f>
<v:f eqn="sum #1 0 10800 "></v:f>
<v:f eqn="cosatan2 10800 @0 @1 "></v:f>
<v:f eqn="sinatan2 10800 @0 @1 "></v:f>
<v:f eqn="sum @2 10800 0 "></v:f>
<v:f eqn="sum @3 10800 0 "></v:f>
<v:f eqn="sum @4 0 #0 "></v:f>
<v:f eqn="sum @5 0 #1 "></v:f>
<v:f eqn="mod @6 @7 0 "></v:f>
<v:f eqn="prod 600 11 1 "></v:f>
<v:f eqn="sum @8 0 @9 "></v:f>
<v:f eqn="prod @10 1 3 "></v:f>
<v:f eqn="prod 600 3 1 "></v:f>
<v:f eqn="sum @11 @12 0 "></v:f>
<v:f eqn="prod @13 @6 @8 "></v:f>
<v:f eqn="prod @13 @7 @8 "></v:f>
<v:f eqn="sum @14 #0 0 "></v:f>
<v:f eqn="sum @15 #1 0 "></v:f>
<v:f eqn="prod 600 8 1 "></v:f>
<v:f eqn="prod @11 2 1 "></v:f>
<v:f eqn="sum @18 @19 0 "></v:f>
<v:f eqn="prod @20 @6 @8 "></v:f>
<v:f eqn="prod @20 @7 @8 "></v:f>
<v:f eqn="sum @21 #0 0 "></v:f>
<v:f eqn="sum @22 #1 0 "></v:f>
<v:f eqn="prod 600 2 1 "></v:f>
<v:f eqn="sum #0 600 0 "></v:f>
<v:f eqn="sum #0 0 600 "></v:f>
<v:f eqn="sum #1 600 0 "></v:f>
<v:f eqn="sum #1 0 600 "></v:f>
<v:f eqn="sum @16 @25 0 "></v:f>
<v:f eqn="sum @16 0 @25 "></v:f>
<v:f eqn="sum @17 @25 0 "></v:f>
<v:f eqn="sum @17 0 @25 "></v:f>
<v:f eqn="sum @23 @12 0 "></v:f>
<v:f eqn="sum @23 0 @12 "></v:f>
<v:f eqn="sum @24 @12 0 "></v:f>
<v:f eqn="sum @24 0 @12 "></v:f>
<v:f eqn="sum #0 0 0 "></v:f>
<v:f eqn="sum #1 0 0 "></v:f>
</v:formulas>
<v:path o: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:h position="#0,#1"></v:h>
</v:handles>
<o:complex v:ext="view"></o:complex>
</v:shapetype>
<select id="zoom" onchange="objPie.Zoom(this.value)">
<option value ="0.2" selected=true>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>
</body>
</html>

windspeed 2005-12-17
  • 打赏
  • 举报
 回复
<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.VMLObject=o;
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=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.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);
hhjjhjhj 2005-12-17
  • 打赏
  • 举报
 回复
服务器端用OWC控件输出图片.
超级大笨狼 2005-12-17
  • 打赏
  • 举报
 回复
你搜索曲线或者VML
超级大笨狼 2005-12-17
  • 打赏
  • 举报
 回复
JS也一样：

<OBJECT id=S style="LEFT: 0px; WIDTH: 500px; TOP: 0px; HEIGHT: 500px" height=240
width=392 classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6" VIEWASTEXT hspace=1 vspace=1>
</OBJECT>

<SCRIPT>
var A=new Array(10,40,70, 20,70,80)
var B=new Array("20030401","20030402","20030403","20030404","20030405","20030406")
for(i=0; i<A.length;i++)
{
S.DrawingSurface.Line(50*i-250,A[i],50*(i+1)-250,A[i+1]);
S.DrawingSurface.Text("狼" + B[i],50*i-250,A[i]);
}
S.DrawingSurface.Text("狼" + B[5],50*i-250,A[i]);
</SCRIPT>
超级大笨狼 2005-12-17
  • 打赏
  • 举报
 回复
呵呵，我这个超级简单
<OBJECT id=S style="LEFT: 0px; WIDTH: 500px; TOP: 0px; HEIGHT: 500px" height=240
width=392 classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6" VIEWASTEXT hspace=1 vspace=1>
</OBJECT>
<SCRIPT LANGUAGE=vbscript>
A=array(10,40,70, 20,70,80)
B=array("20030401","20030402","20030403","20030404","20030405","20030406")
for i=0 to ubound(A)-1
S.DrawingSurface.Line 50*i-250,A(i),50*(i+1)-250,A(i+1)
S.DrawingSurface.Text "狼" & B(i),50*i-250,A(i)
next
S.DrawingSurface.Text "狼" & B(i),50*i-250,A(i)
</SCRIPT>
asp 柱饼线统计图 柱形图 线形图 饼图
在ASP中，柱饼线统计图、柱形图、线形图和饼图是常见的数据可视化工具，它们有助于将复杂的数据以易于理解的方式呈现出来。 柱形图是一种常用的数据表示方法，它使用垂直或水平的柱子来表示不同类别的数据量。在ASP...
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
Echarts是中国百度公司开源的一个JavaScript图表库，它提供了丰富的图表类型，如折线图、柱状图、饼图、散点图、地图等，用于展示各种统计数据。而layui则是一个轻量级的前端UI框架，它简洁且易于使用的组件可以帮助...
C#编程经验技巧宝典
103 <br>0167　锁定文本框内的文本　103 <br>0168　使用Message.Show输出用户信息　104 <br>5.3　图片数据处理技巧　104 <br>0169　如何将图片存入数据库　104 <br>0170　如何将图片从数据库中读取...
Asp.Net实例：C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有...这里我们用就C# 制作三款最经典的统计图: 柱状图, 折线图和扇形图；既然是统计, 当然需要数据, 这里演示的数据存于Sql Server2000中, 三款统计图形都是动态生成. 其中柱状图我会附上制作步骤,
在Asp.net页面中实现数据饼图
ASP.NET之所以能够在客户端浏览器中形成各种数据图片，是因为在ASP.NET中提供了绘图功能，具体的作法是先在服务器端创建一个Bitmap实例，然后利用ASP.NET中提供的绘图功能，按照要生成的图片的模样，进行绘制，最后...
ASP

28,406

社区成员

356,946

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章