计算机科学论坛--[原创]获取动态数据显示的柱形图

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

你们可以看看效果如何，点击柱形还可以改变颜色。
我现在做的系统是VC++编码的，我的这段svg代码也是VC++生成的，我这里的动态数据是随机获得的，但我们的系统要求根据系统中指定的动态变量显示柱形图，我不知道如何使javascript与我的系统通讯获得系统中的动态数据变量，大家出出主意吧！

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

<?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>

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

如果数据与服务器同一台机，可以将数据存成XML，使用getURL()载入，parseXML()读出。

var svgdoc = ""
function get_url(evt){
svgdoc = evt.target.ownerDocument
getURL("test.xml",callback)
}
function callback(data){
if (data.success){
new_node = parseXML(data.content,svgdoc)
//...
}
}

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

谢谢指导！
不过我还不是很懂：
new_node = parseXML(data.content,svgdoc)是不是把test.xml中的数据放在svg文档新生成的节点中了？
那这个新节点new_node是一个什么节点？
我怎样把这个数据从这个节点中取出？
请多多指教！

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

写成 new_node = parseXML(data.content) 也无问题。
new_node 就如 test.xml的根节点，可用dom api将其...

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

我大概理解了，
就是说：
我把要传递的数据存为test.xml中，用用getURL()载入，parseXML()读出到new_node 根节点中，再通过DOM把根节点下的数据拿出来使用，应该是这样吧！
如果理解的不对，还请指教！

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

[[size=1]B]请问你的动态数据显示是怎么实现的?[/B[/size]]

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

我的想法是把从服务器端读取的数据存成xml格式，然后就像rido说的那样，用 getURL()和 parseXML() 的方法把这个包含数据的xml文件加入到svg的DOM树中，然后通过DOM API 读取这些数据来动态更改svg的内容。只是个想法而已，没有具体实现，正在往这方面努力。是否有别的方法，大家切磋一下！

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

zhiyu-2000 给出的那段代码我试了下，说是SVG没有根元素是什么原因啊
我对SVG还不是很了解的说。现在也想做从数据库读取的数据来控制SVG元件的生成

上面提到的存成XML格式，具体是什么样子的呢，有没有人解释一下啊


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