你们可以看看效果如何,点击柱形还可以改变颜色。
我现在做的系统是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)
//...
}
}