首頁 > 開發者 > JavaScript

javascript畫圖表方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
日誌原文：http://zzgziyu.blog.sohu.com/109589244.html

 

 

 

 

<script>
("<html
xmlns:v><style>v//:*{behavior:url(#default#VML)}</style>")
var
ct1=new ct()
function ct(){
   
="green,yellow,red,blue,gray,purple".split(",")
   
s=function(css,k,df){
        if(css==null)
            return
def==null ? "" : df
        var r=new
RegExp("(^|)"+k+":([^/;]*)(/;|$)","gi")
        var
a=(ce(/=/g,":").replace(/ /g,"").toLowerCase())
        return
a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] :
parseInt(a[2]))
    }
    =function(vList,css){
        var
l="",a,n,s,hsz,max=0,cx=20,ch
        var
pw=s(css,"width",500),ph=s(css,"height",300)
       
if(ph<150||pw<150){
            alert("圖表區域太小，中斷輸出！")
           
return
        }
        a=(";")
        for(var i in a){
           
a[i]=a[i].split(",")
            for(var j in a[i]){
               
if(i>0&&j>0)
                   
if(parseInt(a[i][j])>max)
                       
max=parseInt(a[i][j])
            }
        }
       
if(max==0)
            return
        hsz=(ph-100)/max
       
n=(ce(/;/g,"").replace(/,/g,"").length)*20+20
        if(pw<n)
           
pw=n
        l+="<v:rect
fillcolor='"+s(css,"background","white")+"'
style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow
on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px'
/></v:rect>"
        l+="<v:line from="+30+","+(ph-30)+"
to="+30+","+10+"><v:stroke startarrow=none endarrow=classic
/></v:line>"
        l+="<v:line from="+30+","+(ph-30)+"
to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none
endarrow=classic /></v:line>"
        l+="<span
style='position:absolute;z-index:3;font:12;left:220;top:10'>"+s(css,"title")+"</span>"
       
l+="<span
style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+a[0][0]+"</span>"
       
l+="<span
style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+s(css,"vname")+"</span>"

        for(i=0;i<5;i++){
            l+="<v:line
from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+"
strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
           
l+="<span
style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
       
}
       
        for(i in a){
            for(j in a[i]){
               
if(i==0){
                    if(j>0){
                       
l+="<v:rect fillcolor='"+[j-1]+"'
style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20'
/>"
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
                   
}
                }
                else{
                   
if(j==0)
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"
                   
else{
                        ch=a[i][j]*hsz
                       
l+="<v:rect title='"+a[i][j]+"' fillcolor='"+[j-1]+"'
style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"'
/>"
                        if(s(css,"showVal")=="t")
                           
l+="<span
style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'>"+a[i][j]+"</span>"
                       
cx+=20
                    }
                }
            }
           
cx+=20
        }
        return l
    }
   
=function(vList,css){
        var l="",a,n,s,hsz,max=0,ch
       
var pw=s(css,"width",500),ph=s(css,"height",300)
       
if(ph<150||pw<150){
            alert("圖表區域太小，中斷輸出！")
           
return
        }
        a=(";")
        for(var i in a){
           
a[i]=a[i].split(",")
            for(var j in a[i]){
               
if(i>0&&j>0)
                   
if(parseInt(a[i][j])>max)
                       
max=parseInt(a[i][j])
            }
        }
       
if(max==0)
            return
        hsz=(ph-100)/max
       
n=h*40+40
        if(pw<n)
            pw=n
       
l+="<v:rect fillcolor='"+s(css,"background","white")+"'
style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow
on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px'
/></v:rect>"
        l+="<v:line from="+30+","+(ph-30)+"
to="+30+","+10+"><v:stroke startarrow=none endarrow=classic
/></v:line>"
        l+="<v:line from="+30+","+(ph-30)+"
to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none
endarrow=classic /></v:line>"
        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+s(css,"xname")+"</span>"
       
l+="<span
style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+a[0][0]+"</span>"
       
l+="<span
style='position:absolute;z-index:3;font:12;left:220;top:10'>"+s(css,"title")+"</span>"

        for(i=0;i<5;i++){
            l+="<v:line
from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+"
strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
           
l+="<span
style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
       
}
       
        for(i in a){
            for(j in a[i]){
               
if(i==0){
                    if(j>0){
                       
l+="<v:rect fillcolor='"+[j-1]+"'
style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20'
/>"
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
                   
}
                }
                else{
                   
if(j==0)
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"
                   
else{
                        ch=a[i][j]*hsz
                       
if(i>1){
                            oh=parseInt(a[i-1][j]*hsz)
                           
l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+"
to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+[j-1]+"' />"
                       
}
                        l+="<v:rect title='"+a[i][j]+"'
fillcolor='"+[j-1]+"'
style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"'
/>"
                        if(s(css,"showVal")=="t")
                           
l+="<span
style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a[i][j]+"</span>"
                   
}
                }
            }
        }
        return l
   

    }
    =function(vList,css){
        var
l="",a,i,j,n,s,amt,dx=0
        var
pw=s(css,"width",500),ph=s(css,"height",300)
       
if(ph<150||pw<150){
            alert("圖表區域太小，中斷輸出！")
           
return
        }
        a=(";")
        n=h*170-130
       
if(pw<n)
            pw=n
        l+="<v:rect
fillcolor='"+s(css,"background","white")+"'
style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow
on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px'
/></v:rect>"
        l+="<span
style='position:absolute;z-index:3;font:12;left:220;top:10'>"+s(css,"title")+"</span>"
       
if(h==2)
            dx=pw/2-100
        if(h==3)
           
dx=pw/2-180
        for(i in a){
            a[i]=a[i].split(",")
           
amt=0
            for(j=1;j<a[i].length;j++){
               
amt+=parseFloat(a[i][j])
            }
            sa=0
           
for(j in a[i]){
                if(i==0){
                   
if(j>0){
                        l+="<v:rect
fillcolor='"+[j-1]+"'
style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20'
/>"
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
                   
}
                }
                else{
                   
if(j==0){
                        l+="<span
style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'>"+a[i][j]+"("+amt+")</span>"
                   
}
                    else{
                       
ea=a[i][j]*360/amt+sa
                        if(j==a[i].length-1)
                           
ea=0
                        if(a[i][j]>0)
                           

l+=e(60,sa,ea,"title:"+a[i][j]+";val:"+(parseInt((10000*a[i][j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+[j-1])
                       
sa=ea
                    }
                }
            }
       
}
        return l
    }
    e=function(r,sa,ea,css){
       
var sf,ef,sx,sy,ex,ey
        var
title=s(css,"title"),val=s(css,"val")
        var
x=parseInt(s(css,"x",0)),y=parseInt(s(css,"y",0))
       
sf=*(sa/180)
        ef=*(ea/180)
        sy=parseInt(r*(sf))
       
sx=parseInt(r*(sf))
        ey=parseInt(r*(ef))
       
ex=parseInt(r*(ef))
       
       
s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"
       
l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1
style='position:absolute;width:1;height:1;left:"+s(css,"x","0")+";top:"+s(css,"y","0")+"'
fillcolor='"+s(css,"background","white")+"' />"
        if(ef==0)
           
ef=270
        var cx=(r+10)*((sf+ef)/2),cy=(r+10)*((sf+ef)/2)
       
l+="<span
style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>"
       
return l
    }
    =function(vList,css){
        var
l,type=s(css,"type")
        if(type=="pie")
           
l=(vList,css)
        else if(type=="lines")
           
l=(vList,css)
        else
            l=(vList,css)
       
return l
    }
}
</script>
<html>
<body
style=margin:10>
<div id=div1
style=position:absolute;top:0;cursor:default>
</div>
<div
id=div2 style=position:absolute;top:300;cursor:default>
</div>
<div
id=div3 style=position:absolute;top:600;cursor:default>
</div>

</html>
<script>
//---直條圖
HTML=("季度,東部,中部,北部;1季
度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季
度,45.9,1,1","type:bar;showVal:t;vname:銷售額;title:月統計圖")
//---線形圖
HTML=
("季度,東部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季
度,45.9,1,1","type:lines;showVal:t;vname:銷售額;title:月統計圖")
//---餅形圖
HTML=
("季度,東部,中部,北部,西部,南部,海上;1季度,20.4,30.6,90,10,11,12;2季
度,27.4,38.6,34.6,10,11,12;3季度,45.9,1,1,10,11,12;4季
度,45.9,10,10,10,11,12;5季度,45.9,10,10,10,11,12;6季
度,45.9,10,10,10,11,12","type:pie;showVal:t;vname:銷售額;title:月統計圖")

</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More