以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  一个不错的柱形图  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=16732)

--  作者：keeponline
--  发布时间：4/7/2005 1:42:00 PM

--  一个不错的柱形图
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink" onload="setheight()">
<script type="text/javascript">
<![CDATA[
  var svgRoot=document.documentElement;
  var redVal=0;
  var greenVal=0;
  var blueVal=0;
  function  setColor(evt)
    {
     var target=evt.getTarget();
     redVal=Math.round(Math.random()*255);
     greenVal=Math.round(Math.random()*255);
     blueVal=Math.round(Math.random()*255);
     target.setAttribute("fill","rgb("+redVal+","+greenVal+","+blueVal+")");
    }
  function  setheight()
    {
      var rect1,long,long1;
      rect1=svgRoot.getElementById("rect1");
      long=Math.round(Math.random()*200);
      rect1.setAttribute("height",long);
      rect1.setAttribute("y",600-long);
      setTimeout("setheight()",1000);
    }
//]]>
</script>
<g>
<line x1="100" y1="100" x2="100" y2="600" stroke="rgb(0,0,0)"/>
<line x1="100" y1="600" x2="600" y2="600" stroke="rgb(0,0,0)"/>
<line x1="100" y1="350" x2="600" y2="350" />
<line x1="100" y1="100" x2="600" y2="100" />
<text x="98" y="105" text-anchor="end"> 1000 </text>
<text x="98" y="355" text-anchor="end">  500 </text>
<rect id="rect1" x="105" y="400" height="200" width="40" onclick="setColor(evt)"/>
<rect x="150" y="200" height="400" width="40" onclick="setColor(evt)"/>
<rect x="195" y="300" height="300" width="40" onclick="setColor(evt)"/>
<rect x="240" y="100" height="500" width="40" onclick="setColor(evt)"/>
<rect x="285" y="120" height="480" width="40" onclick="setColor(evt)"/>
<rect x="330" y="500" height="100" width="40" onclick="setColor(evt)"/>
<rect x="375" y="440" height="160" width="40" onclick="setColor(evt)"/>
<defs>
<polyline id="polyline" points="97,107 100,100 103,107"/>
</defs>
<use xlink:href="#polyline"/>
<use xlink:href="#polyline" transform="translate(700,500) rotate(90)"/>
</g>
</svg>
--  作者：henrybenben
--  发布时间：4/13/2005 10:17:00 PM

--  
的确不错，要是能做成3维的形式就很完美了：）
--  作者：keeponline
--  发布时间：4/14/2005 8:59:00 AM

--  
恩，我做做。
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms