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函數對其進行編碼。