不用任何控件的VML统计图(1)-饼图

/*未经许可,不得转载!

Email:zcwmxn@sina.com

作者:周长武

*/

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script language="JavaScript" type="text/javascript">
 function Pie(r,item_t,item_v){
  //r半径,item_t项目的标题,item_v项目的值
  var i,s;
  var item_p=new Array(); //各个项目的比例
  var item_q=new Array(); //各个项目的百分比
  var sum=0; //项目总和
  var len=item_t.length; //项目个数
  var d=r*2; //直径
  //定义颜色
  var color1=new Array("#d1ffd1","#ffbbbb","#ffe3bb","#cff4f3","#d9d9e5","#ffc7ab","#ecffb7","#ff0000","#ff0000","#0033ff","#ff9900","#00cc00","#ff99ff","#ff33cc","#66ffcc","#336666","#2E8B57","#D2B48C","#9966FF");
  var color2=new Array("#d1ffd1","#ff0000","#ff9900","#33cccc","#666699","#993300","#99cc00","#FFFFFF","#ff0000","#0033ff","#ff9900","#00cc00","#ff99ff","#ff33cc","#66ffcc","#336666","#2E8B57","#D2B48C","#9966FF");
  for(i=0;i<len;i++)
   sum = sum + parseInt(item_v[i]);
  for(i=0;i<len;i++){
   item_p[i]=item_v[i]/sum;
   item_q[i]=FormatNumber(item_p[i]*100,1)+"%";
  }
  s="<v:group style='width:"+(d+230)+"px;height:"+d+"px' coordsize='"+(d+230)+","+d+"'>";
  //背景
  s+="<v:rect style='left:-5;top:-5;width:"+(d+235)+";height:"+(d+10)+"'>";
  s+="<v:shadow on='t' type='single' color='silver' offset='5px,5px' />";
  s+="</v:rect>";
  //扇形
  var angle1=0;
  var angle2;
  for(i=0;i<len;i++){
   angle2=parseInt(Math.round(360*item_p[i]));
   if(i==len-1) //这样会有误差的!!!!!!!!!!——zcw
    angle2=360-angle1;
   s+="<v:shape title='"+item_t[i]+":"+item_q[i]+"' style='position:relative;width:"+d+";height:"+d+"' coordsize='"+d+","+d+"' strokeweight='1' strokecolor='#fff' fillcolor='"+color1[i]+"' path='m "+r+","+r+" ae "+r+","+r+","+r+","+r+","+65536*angle1+","+65536*angle2+" x e'>";
   s+="<v:fill color2='"+color2[i]+"' rotate='t' focus='100%' type='gradient' />";
   s+="</v:shape>"
   angle1+=angle2;
  }
  //各个项目说明
  s+="<v:group style='position:relative;left:"+(d+25)+";top:"+(d-(22*len+12))+";width:200;height:"+(22*len+4)+"' coordsize='200,"+(22*len+4)+"'>";
  s+="<v:rect style='width:200;height:"+(22*len+4)+"' strokecolor='#333' />";
  for(i=0;i<len;i++){
   s+="<v:rect style='left:4;top:"+(i*22+4)+";width:25;height:18;' title='"+item_t[i]+":"+item_q[i]+"' fillcolor='"+color1[i]+"'><v:fill color2='"+color2[i]+"' rotate='t' focus='100%' type='gradient' /></v:rect>";
   s+="<v:shape style='left:40;top:"+(i*22+4)+";width:200;height:25;white-space:nowrap;text-align : left'>"+item_t[i]+":"+item_v[i]+"("+item_q[i]+")</v:shape>";
  }
  s+="</v:group>";
  s+="</v:group>";
  document.write(s);
 }

 function FormatNumber(srcStr,nAfterDot){
  var srcStr,nAfterDot;
  var resultStr,nTen;
  srcStr = ""+srcStr+"";
  strLen = srcStr.length;
  dotPos = srcStr.indexOf(".",0);
  if (dotPos == -1){
   resultStr = srcStr+".";
   for (i=0;i<nAfterDot;i++)
    resultStr = resultStr+"0";
   return resultStr;
  }
  else{
   if ((strLen - dotPos - 1) >= nAfterDot){
    nAfter = dotPos + nAfterDot + 1;
    nTen =1;
    for(j=0;j<nAfterDot;j++)
     nTen = nTen*10;
    resultStr = Math.round(parseFloat(srcStr)*nTen)/nTen;
    return resultStr;
   }
   else{
    resultStr = srcStr;
    for (i=0;i<(nAfterDot - strLen + dotPos + 1);i++)
     resultStr = resultStr+"0";
    return resultStr;
   }
  }
 }
</script>
<style type="text/css">
<!--
v/:* { Behavior: url(#default#VML) }

-->
</style>

</head>

<body>

   <script language="JavaScript" type="text/javascript">
    var x=new Array("项目1","项目2","项目3","项目4","项目5","项目6");
    var y=new Array(13,28,87,32,56,22);


    //按照大小进行排序
     for(i = 0; i < y.length; i++)
     for(j = i+1; j< y.length; j++){
      if(parseInt(y[i]) <= parseInt(y[j])){ 
        tempy = y[j];
        y[j] = y[i];
        y[i] = tempy;
        
        tempx = x[j];
        x[j] = x[i];
        x[i] = tempx;
       }
        }
       //画图,并控制图大小
    Pie(200,x,y);
   </script>

 </body>
</html> 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

zcwmxn

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值