漂亮的饼图

来源:互联网 发布:网络物流平台 编辑:程序博客网 时间:2024/04/29 02:54
<script language=javascript>
function table3(total,table_x,table_y,all_width,all_height,table_type)
{
    
//参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,图表的类型)
    //纯ASP代码生成图表函数3——饼图
    //作者:龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com
    //本人非常愿意和ASP,VML,FLASH的爱好者在HTTP://topclouds.126.com进行交流和探讨
    //版本1.0 最后修改日期 2003-8-11
    //非常感谢您使用这个函数,请您使用和转载时保留版权信息,这是对作者工作的最好的尊重。

//***************************************************************************************
//
修改说明:
//
                本代码经原作者同意,由 awaysrain(绝对零度)修改为javascript。
//
                最后修改日期 2003-9-22,测试环境为IE 6.0.2500.1106
//
                因本人水平有限,修改中难免有错误,请大家及时指正。  
//
***************************************************************************************

    
var tmdColor1 = new Array();
    
    tmdColor1[
0= "#d1ffd1";
    tmdColor1[
1= "#ffbbbb";
    tmdColor1[
2= "#ffe3bb";
    tmdColor1[
3= "#cff4f3";
    tmdColor1[
4= "#d9d9e5";
    tmdColor1[
5= "#ffc7ab";
    tmdColor1[
6= "#ecffb7";
    
    
var tmdColor2 = new Array();
    
    tmdColor2[
0= "#00ff00";
    tmdColor2[
1= "#ff0000";
    tmdColor2[
2= "#ff9900";
    tmdColor2[
3= "#33cccc";
    tmdColor2[
4= "#666699";
    tmdColor2[
5= "#993300";
    tmdColor2[
6= "#99cc00";
    
    
var tb_color = new Array(tmdColor1,tmdColor2);
    
var tb_height = 30;
    
var total_no = total[0].length;
    
var totalpie = 0;
    
for(var i=0;i<total_no;i++)
    {
        totalpie 
+= total[1][i];
    }
    
var PreAngle = 0;
    
for(var i=0;i<total_no;i++)
    {    
        document.write(
"<v:shape id='_x0000_s1025' alt='' style='position:absolute;left:" + table_x + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:1' coordsize='1500,1400' o:spt='100' adj='0,,0' path='m750,700ae750,700,750,700," + parseInt(23592960*PreAngle) + "," + parseInt(23592960*total[1][i]/totalpie) + "xe' fillcolor='" + tb_color[0][i] + "' strokecolor='#FFFFFF'><v:fill color2='" + tb_color[1][i] + "' rotate='t' focus='100%' type='gradient'/><v:stroke joinstyle='round'/><v:formulas/><v:path o:connecttype='segments'/></v:shape>");
        PreAngle 
+= total[1][i] / totalpie;
    }
    
    
if(table_type=="A")
    {
        document.write(
"<v:rect id='_x0000_s1025' style='position:absolute;left:" + (table_x + all_width + 20+ "px;top:" + (table_y + 20+ "px;width:100px;height:" + (total_no * tb_height + 20+ "px;z-index:1'/>");
        
for(var i=0;i<total_no;i++)
        {            
            document.write(
"<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + all_width + 25+ "px;top:" + (table_y+30+(i)*tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
            document.write(
"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
            document.write(
"<v:rect id='_x0000_s1040' alt='' style='position:absolute;left:" + (table_x + all_width + 80+ "px;top:" + (table_y + 30 + (i)*tb_height+3+ "px;width:30px;height:20px;z-index:1' fillcolor='" + tb_color[0][i] + "'><v:fill color2='" + tb_color[1][i] + "' rotate='t' focus='100%' type='gradient'/></v:rect>");
            
//显示比例数
            //document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x+all_width+110) + "px;top:" + (table_y+30+(i)*tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
            //document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + Math.round(parseFloat(total[1][i]*100/totalpie)*100)/100 + "%</td></tr></table></v:textbox></v:shape>");
        }
    }
    
    
if(table_type == "B")
    {
        
var pie = 3.14159265358979;
        
var TempPie = 0;
        
for(var i=0;i<total_no;i++)
        {
            
var TempAngle = pie * 2 * (total[1][i] / (totalpie * 2+ TempPie);
            
var x1 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/8;
            
var y1 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/8;
            
var x2 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/4;
            
var y2 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/4;
    
            
if(x2>table_x + all_width/2)
            {
                x3 
= x2 + 20;
                x4 
= x3;
            }
            
else
            {
                x3 
= x2 - 20;
                x4 
= x3 - 100;
            }
            document.write(
"<v:oval id='_x0000_s1027' style='position:absolute;left:" + (x1 - 2+ "px;top:" + (y1 - 2+ "px;width:4px;height:4px; z-index:2' fillcolor='#111111' strokecolor='#111111'/>");
            document.write(
"<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x1 + "px," + y1 + "px' to='" + x2 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='#111111' strokeweight='1px'></v:line>");
            document.write(
"<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x2 + "px," + y2 + "px' to='" + x3 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='#111111' strokeweight='1px'></v:line>");
            document.write(
"<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + x4 + "px;top:" + (y2 - 10+ "px;width:100px;height:20px;z-index:1'>");
            document.write(
"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + " " + Math.round(parseFloat(total[1][i] * 100/ totalpie)*100)/100 + "%</td></tr></table></v:textbox></v:shape>")
            TempPie 
+= total[1][i]/totalpie;        
        }
    }
}
</script>

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if !mso]>
<style>
v/:*         { behavior: url(#default#VML) }
o/:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
TD 
{    FONT-SIZE: 9pt}
</style></head>
<body topmargin=5 leftmargin=0 scroll=AUTO>

<script language=javascript>

//=============调用方法=====================

var dataArray = new Array()
dataArray[
0]=200
dataArray[
1]=1200
dataArray[
2]=900
dataArray[
3]=600
dataArray[
4]=1222
dataArray[
5]=413
dataArray[
6]=800
var nameArray = new Array()
nameArray[
0]="中国经营报"
nameArray[
1]="招聘网"
nameArray[
2]="51Job"
nameArray[
3]="新民晚报"
nameArray[
4]="新闻晚报"
nameArray[
5]="南方周末"
nameArray[
6]="羊城晚报"
var total= new Array(nameArray,dataArray)

table3(total,
200,40,250,250,"A");
table3(total,
300,450,250,250,"B");
</script>
</body>
</html>
 
原创粉丝点击