最近公司里要使用到图表控件。
查看公司网站流量时,观察到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>
效果如下图: