js 画柱状图问题?

我做的是这样的功能,就是先是一个柱形图展示出来,比如柱形图是灰的.然后用数据来填充这个柱形图,柱形图上有个标记.当填充的长度超过这个标记时,数据变色.这种用js怎么实现?最好能有例子,js不太熟.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你好，你想需要了解vml 浏览器支持的画图功能.我以前用javascrpt+vml 实现过饼图
http://www.blogjava.net/luchunwei/archive/2009/03/12/64364.html 你看看就是你要的了
如果是2d不需要vml，不过如果是3d的柱状图像就需要vml或者图形背景来实现了
我的做成2d的就行,应该用不到vml.有没有具体的例子,对js实在不熟.
你是或的这个功能有点难度，可以动态修改DIV或者使用vml，SVG之类的
在网上查了一下用jquery+ajax实现应该不错,但具体的不熟.哎!
Yui
Extjs
Rgraph都有柱状图，不需要自己实现。
<html>
  <head>
  <title>JavaScript绘图</title>
  <script   language="JavaScript">
  IE4   =   !   (navigator.appVersion.charAt(0)   <   "4"   ||   navigator.appName   ==   "Netscape")

  var   xo=0
  var   yo=0
  var   Ox   =   -1
  var   Oy   =   -1

  var   rad   =   Math.PI/180
  var   maxY   =   400
  var   color   =   "red"

  function   print(str)   {
  document.write(str)
  }

  function   orgY(y)   {
  return   maxY-y
  }
  function   outPlot(x,y,w,h)   {
  print('<span   style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
  }

  function   Plot(x,y)   {
  outPlot(x,y,1,1)
  if(Ox>=0   ||   Oy>=0)   {
  ShowLine(Ox,Oy,x-Ox,y-Oy)
  }
  Ox   =   x
  Oy   =   y
  }

  function   ShowLine(x,y,w,h)   {
  if(w<0)   {
  x   +=   w
  w   =   Math.abs(w)
  }
  if(h<0)   {
  y   +=   h
  h   =   Math.abs(h)
  }
  if(w<1)   w=1
  if(h<1)   h=1
  outPlot(x,y,Math.round(w),Math.round(h))
  }

  function   LineTo(x,y)   {
  Line(xo,yo,x,y)
  }

  function   sign(n)   {
  if(n>0)
  return   1
  if(n<0)
  return   -1
  return   n
  }

  function   Line(x1,y1,x2,y2)   {
  x2   =   Math.round(x2)
  y2   =   Math.round(y2)
  xo   =   x2
  yo   =   y2
  y1   =   orgY(y1)
  y2   =   orgY(y2)
  var   str   =   ""
  var   i=0

  var   x   =   x1
  var   y   =   y1
  dx   =   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   =   dx
  dx   =   dy
  dy   =   temp
  key   =   1
  }else
  key   =   0
  e   =   2*dy-dx

  for(i=0;i<dx;i++)   {
  px   =   0
  py   =   0
  Plot(x,y)
  while(e>=0)   {
  if(key==1)   {
  x   +=   s1
  px   +=   s1
  }else   {
  y   +=   s2
  py   +=   s2
  }
  e   =   e-2*dx
  }
  if(key==1)
  y   +=   s2
  else
  x   +=   s1
  e   =   e+2*dy
  }
  }

  function   MoveTo(x,y)   {
  Ox   =   Oy   =   -1
  xo   =   Math.round(x)
  yo   =   Math.round(y)
  }

  //   圆
  function   Cir(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)
  }
  }
  //   弧形
  function   Arc(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)
  }
  }
  //   扇形
  function   Pei(x,y,r,a1,a2)   {
  MoveTo(x,y)
  for(var   i=a1;i<=a2;i++)   {
  LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
  }
  LineTo(x,y)
  }
  //   弹出扇形
  function   PopPei(x,y,r,a1,a2)   {
  dx   =   r*Math.cos((a1+(a2-a1)/2)*rad)/10
  dy   =   r*Math.sin((a1+(a2-a1)/2)*rad)/10
  x   +=   dx
  y   +=   dy
  MoveTo(x,y)
  for(var   i=a1;i<=a2;i++)   {
  LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
  }
  LineTo(x,y)
  }

  //   矩形
  function   Rect(x,y,w,h)   {
  MoveTo(x,y)
  LineTo(x+w,y)
  LineTo(x+w,y+h)
  LineTo(x,y+h)
  LineTo(x,y)
  }

  //   准星
  function   zhunxing(x,y)   {
  var   ox   =   xo
  var   oy   =   yo
  var   oColor   =   color
  color   =   "#000000"
  Line(x-5,y,x+6,y)
  Line(x,y-6,x,y+5)
  print('<span   style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
  color   =   oColor
  xo   =   ox
  yo   =   oy
  }
  //   标注
  function   biaozhuStr(x,y,s)   {
  return   '<span   style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
  }
  function   biaozhu(x,y,s,t)   {
  var   ox   =   xo
  var   oy   =   yo
  var   oColor   =   color
  point   =   "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   =   oColor
  xo   =   ox
  yo   =   oy
  }
  </script>
  </head>

  <body>
  <table   border="0"   width="100%">
  <tr>
  <td   width="100%"   style="font-family:   方正舒体;   font-size:   18pt;   color:   #FF0000"   class="t1">JavaScript绘图</td>
  </tr>
  <tr>
  <td   width="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"
  var   jd   =   new   Array(
  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"
  var   gc   =   new   Array(
  150,120,200,180,180
  )
  var   s   =   0
  var   m   =   0
  var   n   =   0
  for(i=0;i<gc.length;i++)   {
  s   +=gc[i]
  if(gc[i]   >   m)   {
  m   =   gc[i]
  n   =   i
  }
  }
  var   k   =   s/360
  var   mm   =   0
  var   a   =0
  for(i=0;i<gc.length;i++)   {
  b   =   Math.round((gc[i]+mm)/k)
  if(i==n)
  PopPei(600,150,100,a,b)
  else
  Pei(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><table   bgcolor=#FF0000><tr><td><font   color=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>")
  }
  </script>

  </body>
  </html>