Office Web Component(OWC)，Report Viewer控件，甚至自己使用GDI+进行绘制等等都可以做到。但是本文中要介绍的FusionCharts Free（http://www.fusioncharts.com/free/）生成的图表更生动，可以更简洁地与用户进行交互，更重要的是，这基本上是一个完全免费的东西，使用它不会为自己带来太多困扰（参见许可协议：http://www.fusioncharts.com/free/TermsOfUse.asp）。当然，和Free版本相比，FusionCharts有一个非免费版本，功能更加强大（参见：http://www.fusioncharts.com/free/Comparison.asp）。而且，事实上，不仅是ASP .NET，无论是何种服务器端变成语言，甚至是在你的Windows应用程序中，都可以使用FusionCharts Free方便地加入图表展示功能。
官方的文档总结FusionCharts Free的优点如下——
- 动画可交互的图表
- 简单但强大的Javascript集成
- 无需安装
- 简单易用
- 与服务器端语言独立（或说无关）
- 减少服务器端负荷
- 多种图表类型支持
- 完全免费
可以在http://www.fusioncharts.com/free/Download.asp上下载到FusionCharts Free的最新版本，下载包中包含了一个js文件、一些涉及到不同服务器端的代码、一些浏览器端即可以查看的示例以及和FushionCharts Free相关的文档。在这些文件中重要的是FusionCharts.js文件以及Charts目录中的22个swf文件。很明显，最终在浏览器中显示的图表是以Flash的形式出现，而FusionCharts.js文件则用于控制这些swf文件最终在浏览器中的显示，要使用FusionCharts实现图表，只要把这个.js文件以及这些.swf文件包含在项目中就可以了。.swf文件是编译后的文件，所以不用特殊方法的话，我们无法看到最终图表实现的细节，幸好FusionCharts Free里面提供的文档还算详细。
先来看看，我们可以使用FusionCharts Free实现哪些类型的图表。Free版本的FusionCharts提供了22种不同的图表（与22个.swf文件相对应，参见http://www.fusioncharts.com/free/docs/Contents/ChartList.html）：单序列图表（2D柱状图、3D柱状图、2D折线图、2D饼图、3D饼图、2D条形图、2D面积图、2D圆环图）、多序列图表（2D柱状图、3D柱状图、2D折线图、2D条形图、2D面积图）、堆叠图表（2D柱状图、3D柱状图、2D条形图、2D面积图）、组合图表（3D柱状图+折线图、2D柱状图+折线图）、财务图表（K线图）、其它图表（甘特图、漏斗图）。这些图表的样式可以在http://www.fusioncharts.com/free/Gallery.asp查看到。一般情况下而言，这些图表类型基本上够用了，重要的是在表现数据时选择正确的图表类型，每种图表类型都具有特定的含义。
上面已经说过了，要使用FusionCharts Free，只需要在项目包含FusionCharts.js和22个对应不同类型图表的.swf文件即可。
FusionCharts.js的主要作用是用于创建一个FusionCharts对象，这个对象将负责控制不同类型图表对应的.swf文件在页面上的显示。这个js文件没有解决Flash动画的遮盖问题，如果需要的话，可以自己手动在函数getSWFHTML中进行相应的修改：
getSWFHTML:
function
()
{
var swfNode = "";
if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture //去除flash文件遮盖 swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" wmode="transparent" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" '; // } else { // PC IE swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">'; swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />'; //去除flash文件遮盖 swfNode += '<param name="wmode" value="transparent" />'; var params = this.getParams(); //
} return swfNode;
}
图表是关于数据的可视化方案，那么如何为FusionCharts Free指定图表数据？
上述的22个对应不同类型图表的.swf文件只能接受XML格式的数据作为图表数据源，可以有2种主要的向这些.swf文件提供数据的方式——
- dataURL方式：指定一个指向包含图表数据的XML文档的URL，该方式对应的是FusionCharts对象的setDataURL方法
- dataXML方式：指定一个XML片断，该方式对应的是FusionCharts对象的setDataXML方法
这两种方式对应的XML数据是怎样传递到.swf文件的？使用FusionCharts.js文件创建的FusionCharts对象将负责连接用于图表显示的swf文件和图表要表现的数据源。
除了这两种为图表指定XML数据的方法之外，还可以通过FusionCharts.js文件中实现的一个Javascript方法updateChartXML，这种方式可以看作是对dataXML方式的一个扩展。
对于dataURL和dataXML方式如何进行选择？
一般情况下，建议使用的传递图表数据的方式是dataURL方式：
- 按照代码分离的原则，我们更希望可以单独管理图表数据XML文件和用于图表展示的HTML页面，相信没有人愿意在Javascript中使用变量保存一个结构可能很复杂的XML文档或片断
- 由于用于接收图表数据的swf文件对于非英文字母的特殊字符的敏感性，我们使用Javascript变量构造一个XML文档或片断时，可能遇到麻烦
来看一个使用dataURL方式指定图表数据源的例子：
<
div
id
="chartdiv"
align
="center"
></
div
>
<
script
type
="text/javascript"
>
var chart = new FusionCharts("../Charts/FCF_Column2D.swf", "ChartId", "600", "350"); chart.setDataURL("Data/Column2D.xml"); chart.render("chartdiv");
</
script
>
主要的代码是一段js脚本，首先声明并实例化一个对象FusionChaets，然后使用该对象的setDataURL方法为图表指定一个包含图表数据的xml文件作为数据源，最后使用该对象的render方法在id属性为chartdiv的div元素中生成图表。
上述对象的构造函数以及两个方法都是在FusionCharts.js文件中进行实现的，所以在包含上述代码的页面中应该首先包含对FusionCharts.js文件的引用。
当然，这里的Column2D.xml并不是一个随随便便的xml文件，它需要使用特定的标签、属性等，否则，相应的swf文件将不能正常解析并显示图表数据。
来看一下Column2D.xml的内容：
<
graph
caption
='Monthly Unit Sales'
xAxisName
='Month'
yAxisName
='Units'
decimalPrecision
='0'
formatNumberScale
='0'
>
<
set
name
='Jan'
value
='462'
color
='AFD8F8'
/>
<
set
name
='Feb'
value
='857'
color
='F6BD0F'
/>
<
set
name
='Mar'
value
='671'
color
='8BBA00'
/>
<
set
name
='Apr'
value
='494'
color
='FF8E46'
/>
<
set
name
='May'
value
='761'
color
='008E8E'
/>
<
set
name
='Jun'
value
='960'
color
='D64646'
/>
<
set
name
='Jul'
value
='629'
color
='8E468E'
/>
<
set
name
='Aug'
value
='622'
color
='588526'
/>
<
set
name
='Sep'
value
='376'
color
='B3AA00'
/>
<
set
name
='Oct'
value
='494'
color
='008ED6'
/>
<
set
name
='Nov'
value
='761'
color
='9D080D'
/>
<
set
name
='Dec'
value
='960'
color
='A186BE'
/>
</
graph
>
相对来说，这样的xml文件中的内容还是比较容易进行理解的，而且，FusionCharts的文档中提供了关于各种不同图表类型可以接受的xml文件标签、属性等的参考，参见文档中的“Chart XML Reference”部分。
通过比较不同类型的图表的xml数据格式，可能会发现，除了漏斗图、K线图、甘特图等特殊图表之外，同一类别中常见图表（如单序列图表中的2D柱状图、3D柱状图、2D折线图、2D饼图、3D饼图、2D条形图、2D面积图、2D圆环图）的xml文件格式是类似的，这样在特定应用中，当需要更改图表类型时，我们只需要将js中的FusionCharts对象重新实例化即可，而不需要更改具体的xml数据源。如上述2D柱状图更改为2D条形图时，我们可以使用以下函数：
<
script type
=
"
text/javascript
"
>
function
changeChartTypeToBar()
{ chart = new FusionCharts("../Charts/FCF_Bar2D.swf", "ChartId", "600", "350"); chart.setDataURL("Data/Column2D.xml"); chart.render("chartdiv"); }
<
/
script>
此时，整个页面不必整个刷新，只需要刷新图表区即可。而且，很显然，这是一个比较简单的操作，需要注意：
- 不同类型的图表的xml数据源可能具有特定的xml标签或属性，所以在需要更改图表类型时，尽量使用在不同图表类型中通用的标签或属性
- 还是要强调，不同类型图表具有不同的含义，虽然可以方便地在不同图表类型之间进行转换，但是如果图表类型选择错误，很可能带来的是画蛇添足之嫌。如上面的时序数据，如果使用饼图可能就不那么恰当了，虽然将该图表转换为饼图是非常简单的操作
另外，使用dataURL方式对图表进行指定的数据源，并不要求是一个实际存在的物理xml文件，可以是任何一个返回XML文件或片断的HTTP请求，只有这样，我们才能根据特定的查询条件或过滤表达式方便地从数据库中检索图表所需数据先是在图表上。很显然，这种方式下只能通过POST传递HTTP请求需要的参数，此时，需要注意的是由于FusionCharts对于特殊字符的敏感性，在为FusionCharts对象使用setDataURL指定参数时，该参数字符串中最好不要包含除了英文字符、数字、?、&和-之外的字符，当然，最好使用Javascript中的escape函数对其进行编码。
8333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
