问题描述
我做的是这样的功能,就是先是一个柱形图展示出来,比如柱形图是灰的.然后用数据来填充这个柱形图,柱形图上有个标记.当填充的长度超过这个标记时,数据变色.这种用js怎么实现?最好能有例子,js不太熟.
解决方案
解决方案二：
你好，你想需要了解vml浏览器支持的画图功能.我以前用javascrpt+vml实现过饼图http://www.blogjava.net/luchunwei/archive/2009/03/12/64364.html你看看就是你要的了
解决方案三：
如果是2d不需要vml，不过如果是3d的柱状图像就需要vml或者图形背景来实现了
解决方案四：
动态修改DIV的长宽即可.
解决方案五：
我的做成2d的就行,应该用不到vml.有没有具体的例子,对js实在不熟.
解决方案六：
你是或的这个功能有点难度，可以动态修改DIV或者使用vml，SVG之类的
解决方案七：
在网上查了一下用jquery+ajax实现应该不错,但具体的不熟.哎!
解决方案八：
YuiExtjsRgraph都有柱状图，不需要自己实现。
解决方案九：
<html><head><title>JavaScript绘图</title><scriptlanguage="JavaScript">IE4=!(navigator.appVersion.charAt(0)<"4"||navigator.appName=="Netscape")varxo=0varyo=0varOx=-1varOy=-1varrad=Math.PI/180varmaxY=400varcolor="red"functionprint(str){document.write(str)}functionorgY(y){returnmaxY-y}functionoutPlot(x,y,w,h){print('<spanstyle="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')}functionPlot(x,y){outPlot(x,y,1,1)if(Ox>=0||Oy>=0){ShowLine(Ox,Oy,x-Ox,y-Oy)}Ox=xOy=y}functionShowLine(x,y,w,h){if(w<0){x+=ww=Math.abs(w)}if(h<0){y+=hh=Math.abs(h)}if(w<1)w=1if(h<1)h=1outPlot(x,y,Math.round(w),Math.round(h))}functionLineTo(x,y){Line(xo,yo,x,y)}functionsign(n){if(n>0)return1if(n<0)return-1returnn}functionLine(x1,y1,x2,y2){x2=Math.round(x2)y2=Math.round(y2)xo=x2yo=y2y1=orgY(y1)y2=orgY(y2)varstr=""vari=0varx=x1vary=y1dx=Math.abs(x2-x1)dy=Math.abs(y2-y1)s1=sign(x2-x1)s2=sign(y2-y1)if(dx==0||dy==0){ShowLine(x1,y1,x2-x1,y2-y1)return}if(dx>dy){temp=dxdx=dydy=tempkey=1}elsekey=0e=2*dy-dxfor(i=0;i<dx;i++){px=0py=0Plot(x,y)while(e>=0){if(key==1){x+=s1px+=s1}else{y+=s2py+=s2}e=e-2*dx}if(key==1)y+=s2elsex+=s1e=e+2*dy}}functionMoveTo(x,y){Ox=Oy=-1xo=Math.round(x)yo=Math.round(y)}//圆functionCir(x,y,r){MoveTo(x+r,y)for(i=0;i<=360;i+=5){LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)}}//弧形functionArc(x,y,r,a1,a2){MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)for(i=a1;i<=a2;i++){LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)}}//扇形functionPei(x,y,r,a1,a2){MoveTo(x,y)for(vari=a1;i<=a2;i++){LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)}LineTo(x,y)}//弹出扇形functionPopPei(x,y,r,a1,a2){dx=r*Math.cos((a1+(a2-a1)/2)*rad)/10dy=r*Math.sin((a1+(a2-a1)/2)*rad)/10x+=dxy+=dyMoveTo(x,y)for(vari=a1;i<=a2;i++){LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)}LineTo(x,y)}//矩形functionRect(x,y,w,h){MoveTo(x,y)LineTo(x+w,y)LineTo(x+w,y+h)LineTo(x,y+h)LineTo(x,y)}//准星functionzhunxing(x,y){varox=xovaroy=yovaroColor=colorcolor="#000000"Line(x-5,y,x+6,y)Line(x,y-6,x,y+5)print('<spanstyle="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')color=oColorxo=oxyo=oy}//标注functionbiaozhuStr(x,y,s){return'<spanstyle="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'}functionbiaozhu(x,y,s,t){varox=xovaroy=yovaroColor=colorpoint="p01.gif"if(t==1){print(biaozhuStr(x-5,y+6,"·"+s))}if(t==2){print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))}color=oColorxo=oxyo=oy}</script></head><body><tableborder="0"width="100%"><tr><tdwidth="100%"style="font-family:方正舒体;font-size:18pt;color:#FF0000"class="t1">JavaScript绘图</td></tr><tr><tdwidth="100%"style="font-family:幼圆;font-size:12pt;color:#008000"class="t2">如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td></tr></table><script>if(IE4){//基本图形color="maroon"Cir(50,40,20)Arc(100,40,20,60,120)Pei(150,60,40,240,300)Rect(200,20,40,40)Line(0,0,20,20)//折线图color="#FF0000"varjd=newArray(203,232,277,223,271,234,273,284,276,250,267,280)MoveTo(30,jd[0]-40)biaozhu(xo,yo,jd[0])for(i=1;i<jd.length;i++){LineTo(i*30+30,jd[i]-40)biaozhu(xo,yo,jd[i],1)}color="#C0C0C0"Line(30,140,i*30+30,140)Line(30,140,30,260)//饼图color="#00FF00"vargc=newArray(150,120,200,180,180)vars=0varm=0varn=0for(i=0;i<gc.length;i++){s+=gc[i]if(gc[i]>m){m=gc[i]n=i}}vark=s/360varmm=0vara=0for(i=0;i<gc.length;i++){b=Math.round((gc[i]+mm)/k)if(i==n)PopPei(600,150,100,a,b)elsePei(600,150,100,a,b)biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)mm=mm+gc[i]a=b}//十字标注MoveTo(280,20)zhunxing(xo,yo)}else{document.write("<p></p><tablebgcolor=#FF0000><tr><td><fontcolor=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>")}</script></body></html>