台灣最大程式設計社群網站
線上人數
582
 
會員總數:245785
討論主題:189420
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> 雙軸折線圖加直條圖範例
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
雙軸折線圖加直條圖範例
價值 : 0 QP  點閱數:735 回應數:0
樓主

站務人員 站長
門外漢
0 1580
542 9
發送站內信

捐贈 VP 給 站務人員

graphic.htm :
<HTML>
<object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 style="width:600;height:500"></object>
<xml id="XmlDoc" src="daily.xml"></xml>
<xml id="Xsl" src="chart.xsl"></xml>
<script for=window event=onload>
ChartSpace1.XMLData = XmlDoc.transformNode(Xsl.XMLDocument);
</script>
</HTML>

chart.xsl :
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" >
<xsl:script>
var ci = 0;
var bi = 0;
var lastcolor = "";
var colors = new Array("black", "blue", "red", "green", "magenta", "orange", "brown", "gray", "#60A090", "yellow", "purple");
var barcolors = new Array("#B0E0B0", "#B0B0F0", "#F0B0B0", "white");
function GetColor()
{
return colors[ci++];
}
function GetBarColor()
{
lastcolor = barcolors[bi++];
return lastcolor;
}
function GetLastBarColor()
{
return lastcolor;
}
function GetDate(node)
{
var sa = node.text.split("/");
return sa[0] + "/" + sa[1];
}

var first = true;
var nodename = "";
function GetName(node)
{
nodename = node.getAttribute("type");
first = true;
return nodename;
}

// This function exists to pad the chart with zeros to make sure the
// lines do not left align themselves.
var lastnode = "";
function GetValue(node)
{
var result = first ? "0" : "";
var child = node.selectSingleNode(nodename);
if (child) {
if (child.text != "") {
first = false;
result = child.text;
}
}
return result;
}
</xsl:script>
<xsl:template match="/">
<xml xmlns:x="urn:schemas-microsoft-com:office:excel">
<x:WebChart>
<x:OWCVersion>9.0.0.2710</x:OWCVersion>
<x:Width>20664</x:Width>
<x:Height>9260</x:Height>
<x:Chart>
<x:PlotArea>
<x:Interior>
<x:Color>#F0F0F0</x:Color>
</x:Interior>
<x:Graph>
<x:Type>Line</x:Type>
<x:SubType>Standard</x:SubType>
<xsl:for-each select="list/Schema/ElementType/element[@type != 'id' $and$ @type != 'date' $and$ @view != 'bar' $and$ @view != 'false']">
<x:Series>
<x:Line>
<x:Color><xsl:eval>GetColor()</xsl:eval></x:Color>
</x:Line>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:eval>GetName(this)</xsl:eval></x:Data>
</x:Caption>
<x:Index>2</x:Index>
<x:Category>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each select="/list/item/date"><xsl:eval>GetDate(this)</xsl:eval>,</xsl:for-each></x:Data>
</x:Category>
<x:Value>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each select="/list/item[date]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
</x:Value>
</x:Series>
</xsl:for-each>
<x:ScaleID>69343828</x:ScaleID>
<x:ScaleID>69343968</x:ScaleID>
<x:Overlap>100</x:Overlap>
<x:GapWidth>150</x:GapWidth>
</x:Graph>
<x:Graph>
<x:Type>Column</x:Type>
<x:SubType>Stacked</x:SubType>
<xsl:for-each select="list/Schema/ElementType/element[@type != 'id' $and$ @type != 'date' $and$ @view ='bar' $and$ @view != 'false']">
<x:Series>
<x:Border>
<x:Color><xsl:eval>GetBarColor()</xsl:eval></x:Color>
</x:Border>
<x:Interior>
<x:Color><xsl:eval>GetLastBarColor()</xsl:eval></x:Color>
</x:Interior>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:eval>GetName(this)</xsl:eval></x:Data>
</x:Caption>
<x:Index>1</x:Index>
<x:Value>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each select="/list/item[date]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
</x:Value>
</x:Series>
</xsl:for-each>
<x:ScaleID>69343828</x:ScaleID>
<x:ScaleID>100</x:ScaleID>
<x:Overlap>100</x:Overlap>
<x:GapWidth>150</x:GapWidth>
</x:Graph>
<x:Axis>
<x:AxisID>69344108</x:AxisID>
<x:ScaleID>69343968</x:ScaleID>
<x:Type>Value</x:Type>
<x:MajorGridlines>
<x:Line>
<x:Color>#BBBBBB</x:Color>
</x:Line>
</x:MajorGridlines>
<x:MajorUnit>25.0</x:MajorUnit>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Left</x:Placement>
</x:Axis>
<x:Axis>
<x:AxisID>69337272</x:AxisID>
<x:ScaleID>100</x:ScaleID>
<x:Type>Value</x:Type>
<x:MajorGridlines>
<x:Line>
<x:Color>#000000</x:Color>
</x:Line>
</x:MajorGridlines>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Right</x:Placement>
</x:Axis>
<x:Axis>
<x:AxisID>69344504</x:AxisID>
<x:ScaleID>69343828</x:ScaleID>
<x:Type>Category</x:Type>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Bottom</x:Placement>
</x:Axis>
</x:PlotArea>
<x:Legend>
<x:Placement>Right</x:Placement>
</x:Legend>
</x:Chart>
<x:Scaling>
<x:ScaleID>69343828</x:ScaleID>
</x:Scaling>
<x:Scaling>
<x:ScaleID>69343968</x:ScaleID>
</x:Scaling>
<x:Scaling>
<x:ScaleID>100</x:ScaleID>
</x:Scaling>
</x:WebChart>
</xml>
</xsl:template>
</xsl:stylesheet>

dialy.xml : (檔案太大,所以只擷取幾筆資料)
<?xml version="1.0" encoding="windows-1252"?>
<list next="65" timestamp="82" schemastamp="27">
<Schema next="21">
<ElementType name="item">
<element id="s1" type="id"/>
<!-- must have an id on every row -->
<element id="s12" type="date" values="" view=""/>
<element id="s10" type="target" values="" view=""/>
<element id="s8" type="active" values="" view=""/>
<element id="s9" type="dev" values="" view=""/>
<element id="s11" type="pm" values="" view=""/>
<element id="s12" type="test" values="" view=""/>
<element id="s13" type="ue" values="" view=""/>
<element id="s14" type="resolved" values="" view=""/>
<element id="s16" type="rdev" values="" view="false" color=""/>
<element id="s17" type="rpm" values="" view="false" color=""/>
<element id="s18" type="rtest" values="" view="false" color=""/>
<element id="s19" type="rue" values="" view="false" color=""/>
<element id="s20" type="in" title="" values="" view="bar" color=""/>
<element id="s21" type="out" title="" values="" view="bar" color=""/>
</ElementType>
<in/>
</Schema>
<title>Daily Bug Counts<in/>
</title>
<item><id>19</id><date>8/14/2000</date>
<active>249</active>
<target>250</target>
<dev>139</dev>
<pm>36</pm>
<test>6</test>
<ue>49</ue><resolved>658</resolved><in>30</in>
<out>22</out>
</item>
<item><id>20</id><date>8/15/2000</date>
<active>249</active>
<target>242</target>
<dev>142</dev>
<pm>24</pm>
<test>5</test>
<ue>51</ue><resolved>639</resolved><in>20</in>
<out>41</out>
</item>
<item><id>21</id><date>8/16/2000</date>
<active>224</active>
<target>234</target>
<dev>139</dev>
<pm>24</pm>
<test>7</test>
<ue>43</ue><resolved>653</resolved><in>28</in>
<out>36</out>
</item>
<item><id>22</id><date>8/17/2000</date>
<active>211</active>
<target>226</target>
<dev>133</dev>
<pm>21</pm>
<test>3</test>
<ue>45</ue><resolved>664</resolved><in>18</in>
<out>50</out>
</item>
<item><id>23</id><date>8/18/2000</date>
<active>171</active>
<target>218</target>
<dev>97 </dev><pm>22</pm>
<test>3</test>
<ue>41</ue><resolved>659</resolved><in>32</in>
<out>28</out>
</item>
<item><id>24</id><date>8/21/2000</date>
<active>252</active>
<target>210</target>
<dev>108</dev>
<pm>81</pm>
<test>3</test>
<ue>49</ue><resolved>572</resolved><in>25</in>
<out>33</out>
</item>
</list>



本篇文章發表於2002-06-22 00:00
目前尚無任何回覆
   

回覆
如要回應,請先登入.