最近公司里要使用到圖表控件。
查看公司網站流量時,觀察到http://www.cnzz.com 中的統計報表挺好看的,就習慣性的查看了下源代碼,才知道了用的是FusionCharts控件。
FusionCharts是一個前台是Flash的文件的一個報表控件,通過傳到swf中的Xml數據來控制顯示的報表圖形。
在.net 中也可以動態生成Xml,把生成的Xml作為報表的數據源,報表就可以出來了。
思路有了,開始行動。
對於生成Xml,有兩種做法,一個是用Repeater控件,另一個用一般處理程序(ashx)。本文用到的后一種。
data.ashx生成的Xml文件:
<chart>
 <categories >
 <category label='1' />
 <category label='2' />
 <category label='3' />
 <category label='4' />
 <category label='5' /> 
 </categories> 
 <dataset seriesName='辦公室' > 
 <set value='0' toolText='辦公室' /> 
 <set value='3' toolText='辦公室' /> 
 <set value='0' toolText='辦公室' /> 
 <set value='2' toolText='辦公室' /> 
 <set value='0' toolText='辦公室' /> 
 </dataset>
 <dataset seriesName='兒童世界管理部' > 
 <set value='5' toolText='兒童世界管理部' />
 <set value='0' toolText='兒童世界管理部' />
 <set value='0' toolText='兒童世界管理部' /> 
 <set value='3' toolText='兒童世界管理部' /> 
 <set value='0' toolText='兒童世界管理部' /> 
 </dataset> 
</chart>
apsx中的代碼:
<html><head>
 <title></title>
 <script src="FusionCharts.js" type="text/javascript"></script>
 <script src="MSLine.swf" language="javascript" type="text/javascript"></script>
</head>
<body>
 <div id="chartdiv1" align="center">
 </div>
 <script type="text/javascript">
 var chart = new FusionCharts("MSLine.swf", "ChartId", "850", "400", "0", "0");
 chart.setDataURL("data.ashx");
 chart.render("chartdiv1");
 </script>
</body>
</html>
效果如下圖:

