饼状图制作(JS+VML)

转载 2008年05月01日 06:45:00
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<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&g <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

【UI】第一周 PS软件基础

-
  • 1970年01月01日 08:00

jfreechart生成柱状图与饼状图(入门)

jfreechart生成柱状图与饼状图(入门)贴两段代码。/** * 生成柱状图 */ public String genChannelNumBarChart() { try { ...
  • guoxu775
  • guoxu775
  • 2012-10-09 11:20:12
  • 3270

做一个漂亮的饼状图

@model List     #Main {         width: 800px;         height: 500px;         border: 1px solid...
  • wxg8681
  • wxg8681
  • 2015-01-27 14:42:06
  • 718

制作网页图表 饼状图

可以用 echarts 地址:http://echarts.baidu.com/
  • gjx870327
  • gjx870327
  • 2015-02-16 15:09:37
  • 316

C# winfrom 制作饼状图和柱状图

  • 2010年05月05日 12:59
  • 51KB
  • 下载

java饼状图系列图形制作

Highcharts、Highstock、Highmaps 使用教程网址:   https://www.hcharts.cn/docs/
  • qq_35464063
  • qq_35464063
  • 2017-07-11 15:13:12
  • 94

react 创建饼状图

npm install react-highcharts –save 引入页面中 import Highcharts from ‘react-highcharts’ 在render中调用代码如下(这是...
  • Muxinn
  • Muxinn
  • 2017-12-15 11:27:12
  • 186

Asp.net中制作柱状饼状报表统计图

一、 引言 在许多B/S结构的信息管理软件中,利用在线统计图帮助用户观察、分析各种各样的数据,要比纯粹依靠统计表格更直观,更形象。然而,与窗体类程序相比,在WEB中实现统计图功能存在着一些差别,如果利...
  • huhuan10
  • huhuan10
  • 2010-12-14 15:57:00
  • 3516

html js highcharts绘制圆饼图表

jquery实现饼状图效果 - 站长素材 var chart; $(function () { var totalMoney=999 var ...
  • szstephenzhou
  • szstephenzhou
  • 2014-09-26 10:23:39
  • 3278

echarts制作的饼状图

  • 2016年04月13日 18:26
  • 357KB
  • 下载
收藏助手
不良信息举报
您举报文章:饼状图制作(JS+VML)
举报原因:
原因补充:

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