<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--ﾆｽﾃ賻ｧｹ・<html xmlns:v="urrn:schemas-microsoft-com:vml" xmlnds:o="urn:schemas-microsoft-com:office:office">-->
<head>
<!-- ﾑｽｱ・-->
<STYLE>
v\:* { Behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
body{font-family:arial}
</STYLE>
<title>3D Pie</title>
<script src=Pie3D.js ></script>
<script src=global.js ></script>
</head>
<body>
<div id='pieChart'></div>
<script>
xxColor=new Array("#ccc","#b5cc88","#6B8E23","#3CB371","#f59d56","yellow","#d8d8d8","#708090","#4682B4","red","#ffc20e");
var pie=new Pie3D('pieChart',320,192,'TEST 3D PIE');
for(var i=0;i<10;i++){
dcake=new Array("cake"+i,Math.random()*10,xxColor[i]);
pie.Cakes[i]=dcake;
}
pie.draw();
</script>
</body>
</html>
//3D Pie ﾀ犢籏ｰ
//luchunwei@hotmail.com ﾂｬｴｺﾎｾ
onit=true
num=0
function moveup(iteam,top,txt,rec){
temp=eval(iteam);
tempat=eval(top)
temptxt=eval(txt)
temprec=eval(rec);
at=parseInt(temp.style.top);
temprec.style.display = "";
if (num>15){
temptxt.style.display = "";
}
if(at>(tempat-16)&&onit){
num++
temp.style.top=at-1;
Stop=setTimeout("moveup(temp,tempat,temptxt,temprec)",10)
}else{
return
}
}
function movedown(iteam,top,txt,rec){
temp=eval(iteam)
temptxt=eval(txt)
temprec=eval(rec)
clearTimeout(Stop)
temp.style.top=top
num=0
temptxt.style.display = "none";
temprec.style.display = "none";
}
function ontxt(iteam,top,txt,rec){
temp = eval(iteam);
temptxt = eval(txt);
temprec = eval(rec)
if (onit){
temp.style.top = top-28;
temptxt.style.display = "";
temprec.style.display = "";
}
}
function movereset(over){
if (over==1){
onit=false
}else{
onit=true
}
}
function Pie3D(pContainer,pwidth,pheight,pcaption){
this.Container=document.getElementById(pContainer);
this.width=pwidth+'px' || "400px";
this.height=pheight+'px' || "250px";
this.caption=pcaption;
this.background="<v:rect id='background' style='position:absolute;left:1px;top:1px;WIDTH:"+this.width+";HEIGHT:"+this.height+";' fillcolor='#EFEFEF' strokecolor='gray'>"+
//"<v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>"+
"</v:rect>";
this.Cakes=new Array(); //[name,qty,color]
this.Percent=new Array();
this.vTotal=0;
this.Cake3d="<v:shapetype id='Cake_3D' coordsize='21600,21600' o:spt='95' adj='11796480,5400' path='al10800,10800@0@0@2@14,10800,10800,10800,10800@3@15xe'></v:shapetype>";
this.Text3d="<v:shapetype id='3dtxt' coordsize='21600,21600' o:spt='136' adj='10800' path='m@7,l@8,m@5,21600l@6,21600e'>"+
"<v:path textpathok='t' o:connecttype='custom' o:connectlocs='@9,0;@10,10800;@11,21600;@12,10800' o:connectangles='270,180,90,0'/>"+
"<v:textpath on='t' fitshape='t'/>"+
"<o:lock v:ext='edit' text='t' shapetype='t'/>"+
"</v:shapetype>";
this.draw=function(){
this.init();
this.drawCanvas();
this.drawCake();
}
}
Pie3D.prototype.init=function(){
this.vTotal=0;
for(var i=0;i<this.Cakes.length;i++){
this.vTotal+=this.Cakes[i][1];
}
for(var i=0;i<this.Cakes.length;i++){
this.Percent[i]=this.Cakes[i][1]/this.vTotal;//document.writeln(this.Percent[i])
}
}
Pie3D.prototype.drawCanvas=function(){
var canvas=document.createElement("v:group");
canvas.style.position='absolute';
canvas.style.top='3px';
canvas.style.left='2px';
canvas.style.width=this.width;
canvas.style.height=this.height;
canvas.coordsize='21000,11500';
this.Container.innerHTML=this.Cake3d+this.Text3d+this.background;
this.Container.appendChild(canvas);//alert(this.Container.innerHTML)
this.drawLegend(canvas);//alert(this.Container.innerHTML)
}
Pie3D.prototype.drawLegend=function(canvas){
var legend=document.createElement("v:rect");
legend.style.position='relative';
legend.style.top='100px';
legend.style.left='500px';
legend.style.width='20000px';
legend.style.height='1000px';
legend.stroked='false';
var captiontb=document.createElement("v:TextBox");
captiontb.inset='0pt,0pt,0pt,0pt';
captiontb.innerHTML="<table width='100%' border='0' align='center' cellspacing='0'><tr><td align='center' valign='middle'>"+
"<div style='font-size:12pt; '><B>"+this.caption+"</B></div>"+
"</td></tr></table>" ;
legend.appendChild(captiontb);
var plainarea=document.createElement("v:rect");
plainarea.style.position='relative';
plainarea.style.top='1200px';
plainarea.style.left='500px';
plainarea.style.width='20000px';
plainarea.style.height='10000px';
plainarea.strokecolor='#888';
plainarea.fillcolor='#9fc';
plainarea.onmouseover='movereset(1)';
plainarea.onmouseout='movereset(0)';
var fillStyle="<v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>";
plainarea.innerHTML=fillStyle;
var legendbx=document.createElement("v:rect");
legendbx.style.position='relative';
legendbx.style.top='1400px';
legendbx.style.left='15000px';
legendbx.style.width='5000px';
legendbx.style.height='9200px';
legendbx.fillcolor='#9cf';
legendbx.stroked='t';
legendbx.strokecolor='#09f';
fillStyle="<v:fill rotate='t' angle='-175' focus='100%' type='gradient'/>"+
"<v:shadow on='t' type='single' color='silver' offset='1pt,1pt'/>";
legendbx.innerHTML=fillStyle;
var legendttl=document.createElement("v:rect");
legendttl.style.position='relative';
legendttl.style.top='1550px';
legendttl.style.left='15400px';
legendttl.style.width='4300px';
legendttl.style.height='900px';
legendttl.fillcolor='#afc';
legendttl.stroked='f';
legendttl.strokecolor='#000';
fillStyle="<v:TextBox inset='2pt,0pt,0pt,0pt' style='font-size:10pt;'>"+
"<div align='left'><font color='#000'>ｹｲ:"+this.vTotal+"</font></div></v:TextBox>";
legendttl.innerHTML=fillStyle;
canvas.appendChild(legend);
canvas.appendChild(plainarea);
canvas.appendChild(legendbx);
canvas.appendChild(legendttl);
for(var i=0;i<this.Cakes.length;i++){topx=2500+i*768;
var legendxbg=document.createElement("v:rect");
legendxbg.id='rec'+(i+1);
legendxbg.style.position='relative';
legendxbg.style.top=topx+'px';
legendxbg.style.display='none';
legendxbg.style.left='15400px';
legendxbg.style.width='4300px';
legendxbg.style.height='900px';
legendxbg.fillcolor='#efefef';
legendxbg.strokecolor=this.Cakes[i][2];
fillStyle="<v:fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/>";
legendxbg.innerHTML=fillStyle;
var legendx=document.createElement("v:rect");
legendx.style.position='relative';
legendx.style.top=(topx+50)+'px';
legendx.style.left='15500px';
legendx.style.width='600px';
legendx.style.height='700px';
legendx.fillcolor=this.Cakes[i][2];
legendx.stroked='f';
var legendxtxt=document.createElement("v:rect");
legendxtxt.style.position='relative';
legendxtxt.style.top=(topx+50)+'px';
legendxtxt.style.left='16300px';
legendxtxt.style.width='3400px';
legendxtxt.style.height='700px';
legendxtxt.filled='f';
legendxtxt.stroked='f';
fillStyle="<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='left'>"+this.Cakes[i][0]+":"+xRound(this.Cakes[i][1],2)+"</div></v:TextBox>";
legendxtxt.innerHTML=fillStyle;
canvas.appendChild(legendxbg);
canvas.appendChild(legendx);
canvas.appendChild(legendxtxt);
}
}
Pie3D.prototype.drawCake=function(){
var k1 =180;
var zIndex = 10;
var rotates;
var adjs;
var _left=0;
var _top=0;
Height=parseInt(this.height);
Width=parseInt(this.width);
for(var i=0;i<this.Cakes.length;i++){
var k2= 360 * this.Percent[i] /2;
rotates = k1 + k2;
if (rotates>= 360)
rotates = rotates - 360;
adjs = ( -11796480 * this.Percent[i] + 5898240 );
var k5 = Math.PI * 2 * ( 180 - ( rotates - 180 ) ) / 360;
var R = Height / 2;
var txt_x = _left + Height / 8 - 30 + R + R * Math.sin(k5) * 0.7;
var txt_y = _top + Height / 14 - 39 + R + R * Math.cos(k5) * 0.7 * 0.5;
var cakepie=document.createElement("div");
cakepie.style.cursor='hand';
cakepie.innerHTML="<v:shape id='cake"+(i+1)+"' type='#Cake_3D' title='"+this.Cakes[i][0]+":"+xRound(this.Cakes[i][1],2)+"ｱﾈﾀ:"+xRound(this.Percent[i]*100,2)+"%'"+
" style='position:absolute;left:"+(_left + Height / 8)+"px;top:"+(_top + Height / 14)+"px;WIDTH:"+Height+"px;HEIGHT:"+Height+"px;rotation:"+rotates+";z-index:"+zIndex+"' adj='"+adjs+",0'"+
" fillcolor='"+this.Cakes[i][2]+"' onmouseover='moveup(cake"+(i+1)+","+(_top + Height / 14)+",txt"+(i+1)+",rec"+(i+1)+")'; onmouseout='movedown(cake"+(i+1)+","+(_top + Height / 14)+",txt"+(i+1)+",rec"+(i+1)+");'>"+
"<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>"+
"<o:extrusion v:ext='view' on='t' backdepth='16' rotationangle='60' viewpoint='0,0'viewpointorigin='0,0' skewamt='0' lightposition='-50000,-50000' lightposition2='50000'/>"+
"</v:shape>";
cakepie.innerHTML+="<v:shape id='txt"+(i+1)+"' type='#3dtxt' style='position:absolute;left:"+txt_x+"px;top:"+txt_y+"px;z-index:20;display:none;width:50; height:12;'"+
" fillcolor='red' onmouseover='ontxt(cake"+(i+1)+","+(_top + Height / 14)+",txt"+(i+1)+",rec"+(i+1)+")'>"+
"<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>"+
"<v:textpath style='v-text-kern:t' trim='t' fitpath='t' string='"+this.Cakes[i][0]+":"+xRound(this.Percent[i]*100,2)+"%'/> "+
//"<o:extrusion v:ext='view' backdepth='1pt' on='t' lightposition='0,0' lightposition2='0,0'/>"+
"</v:shape>";
//alert(cakepie.innerHTML)
this.Container.appendChild(cakepie);
k1= k1 + k2 * 2;
if (k1 >= 360)
k1 = k1 - 360;
if (k1 > 180)
zIndex = zIndex + 1;
else
zIndex = zIndex - 1;
}
}
/*
* xRound(num,n):ﾊﾖｵｸｽｻｯｺｯﾊ｣ｬDightﾒｪ
* ｸｽｻｯｵﾄ ﾊﾗﾖ｣ｬHowﾒｪｱ｣ﾁﾄﾐ｡ﾊﾎｻﾊ｡｣
*/
function xRound(num,n)
{
num = Math.round (num*Math.pow(10,n))/Math.pow(10,n);
return num;
}
分享到：
发表评论
-
兼容模式设置
2011-09-13 09:28 961为了最好的视觉效果，可以进行兼容模式设置，如不设置也可正 ... -
google地图图标
2011-01-17 17:09 21091.在指定位置指定 ... -
iefav
2010-09-17 10:14 0反对伐发放 -
fsda
2010-09-16 16:20 0fadfa -
book
2010-09-16 16:16 0rwe -
SQLdll
2010-09-16 16:13 0gsf -
xml验证 转载
2010-05-14 10:04 1108开发环境：VS2008 在.NET中说到验证XML，估 ... -
内部排序算法
2010-04-28 07:57 718几种内部排序算法总结!(冒泡排序、快速排序、直接插入排序、 ... -
tree
2009-01-20 09:51 637tree -
iframe 父子窗体调用
2008-11-20 16:03 1534iframe 父窗口和子窗口的调用方法 Posted on ... -
table行列固定
2008-11-04 13:27 2330<html> <head> <s ... -
DHtml
2008-09-26 10:21 621dhtml -
group box
2008-07-02 13:18 1177关于Silverlight Silverlight 是一个跨浏 ... -
vml 折线图
2008-07-01 16:57 2028<HTML xmlns:v="urn:sche ... -
vml资料
2008-06-18 16:45 2009http://hi.baidu.com/greatmast ... -
前台图片效果
2008-06-18 14:29 1365<SPAN class="bold" ... -
锚点是什么？
2008-05-05 15:10 15031：锚点是什么？锚点也可以理解成为一种超级链接，只不过它是网页 ... -
webchart作图
2008-05-05 12:57 2231<%@ Import Namespace="S ... -
vml圆角，箭头（IE）
2008-05-05 12:51 2777<HTML xmlns:v> <HEAD& ...
相关推荐
VML饼图，PHP版。 VML只有IE支持。 演示： http://www.liuyuanjun.com/test/chart0.php
给予vml的一个统计饼图，非常漂亮，支持动作
VML饼图** 饼图用于显示部分与整体的关系。在VML中，我们首先需要计算每个扇区的角度，然后创建一系列的椭圆弧线来形成饼图。下面是一个简单的扇形示例： ```xml ; width:200px; height:200px;"> <!-- 更...
在这个特定的案例中，我们讨论的是如何使用JavaScript封装VML（Vector Markup Language）来绘制饼图、柱状图和折线图。VML是一种矢量图形格式，允许在IE浏览器中创建和展示复杂的图形，特别是在不支持SVG（Scalable ...
**VML（Vector Markup Language）**是一种标记语言，用于在网页上创建矢量图形。...通过查看和学习这个示例，你可以更好地理解如何利用VML创建动态、交互式的3D饼图，这对于Web开发中数据可视化的应用场景非常有价值。
### js_vml_饼图__柱状图_曲线图知识点详解 #### 一、VML简介 VML（Vector Markup Language）是一种由微软开发的矢量图形标记语言，它主要用于在Internet Explorer浏览器中创建动态和静态的矢量图形。VML允许开发者...
在本实例中，我们结合了VML和JavaScript来创建3D饼图，同时也支持单个饼块的浮动动画效果，使得数据展示更加生动有趣。** 首先，理解VML的基本结构。VML文档通常由`<v:shape>`、`<v:fill>`、`<v:path>`等元素组成，...
总的来说，尽管现在SVG和Canvas已经成为主流的图形绘制方式，但了解如何使用VML绘制柱状图和饼图对于理解图形渲染的历史和技术演进仍然很有价值。同时，对于需要兼容旧版IE浏览器的项目，这仍然是一个实用的技能。
用vml画饼状图用vml画饼状图用vml画饼状图用vml画饼状图
在这个场景中，“纯asp使用vml绘线柱饼图”是一个独特的实践，它利用了VML（Vector Markup Language）来在网页上生成图形。 VML是微软提出的一种矢量图形语言，它允许开发者在IE浏览器中创建和显示复杂的图形。尽管...
在JavaScript中，开发者可以利用VML来创建各种图表，如柱状图、饼图和曲线图，以可视化数据。下面我们将详细探讨这些图表的实现和相关知识点。 1. **VML基础** VML是一种基于XML的语言，它可以精确地描述图形元素...
在本主题中，我们将深入探讨如何使用VML来绘制线图、柱状图和饼图。 1. VML基本结构： VML由一系列的形状元素组成，如`<v:shape>`，每个形状都有自己的属性，如填充色、描边色、宽度等。一个简单的VML图形通常包含...
在VML中，我们可以创建一系列的圆形（`<v:oval>`）并调整其大小和角度来构建饼图。同时，需要添加`stroke-dasharray`属性来切割圆环，形成各部分。 4. **折线图**：折线图通过连接一系列数据点来展示数据随时间的...
VML（Vector Markup Language）是一种基于XML的矢量图形语言，主要在Internet Explorer浏览器中使用，用于在网页上绘制矢量图形。在这个特定的程序中，它被用来创建3D效果的图表，包括3D饼图、3D柱图和折线图。这些...
在本示例中，ASP被用来处理和解析来自数据库或其他数据源的数据，然后使用VML（Vector Markup Language）来生成各种图表，如饼图、柱图和折线图。 VML是一种基于XML的矢量图形语言，允许在网页上创建和显示复杂的...
在这个案例中，作者使用了VML（Vector Markup Language）来创建饼图，这是一种在IE浏览器中支持矢量图形的技术。 【描述】 "用VML写的圆饼图实现，接口简单易用，图形美观，是难得的好作品" 描述提到，这个饼图的...
例如，开发者可以利用VML创建各种类型的图表，如条形图、饼图、线图等，这些图表可用于数据可视化，帮助用户更好地理解和分析信息。同时，由于VML是基于XML的，所以数据可以直接嵌入到图形中，方便数据驱动的动态...
在给定的资源中，"asp\asp.net统计图VML"是一个关于如何在ASP和ASP.NET中创建统计图表的教程或组件，主要涵盖了饼图、曲线图和柱图这三种常见的数据可视化形式。 VML，全称Vector Markup Language，是一种用于在...
本话题主要关注如何使用ASP来制作直方图和饼图，这两种图表在数据分析和可视化中非常常见。直方图用于展示数据分布的频数或频率，而饼图则用于表示各部分占整体的比例。 VML（Vector Markup Language）是一种XML...
关于VML极道教程 VML的强大与用途 VML精彩实例 ---- VML语言入门 VML标记与通用属性 标记实战与line线 ---- oval圆rect矩型 RoundRect圆矩型 arc圆弧 image图片 polyline多边型 shape多边型...