在上一篇文章中我介紹了winforms下的圖表控件——MSChart，雖然MSChart同樣為我們提供了asp.net上的圖表支持，但是實際的使用過程卻不怎么如意，所以后來正巧在豬八戒上閑逛有人要求使用FunsionCharts這種flash圖表來進(jìn)行展示，所以花了點時間學(xué)習(xí)了下，本文就是針對FunsionCharts的一些使用問題進(jìn)行記錄。

一、asp.net下的圖表選擇簡介

　　 相比winforms上只能通過一個個控件來展示數(shù)據(jù)來說，asp.net上要進(jìn)行圖表的展示的選擇就多了很多，下面我簡單的對幾種選擇進(jìn)行介紹，主要是針對其優(yōu)缺點：

　　1、MSChart，微軟封裝好的圖表控件，微軟自家的東西，當(dāng)然還有一些其他的圖表控件，不過MSChart相對來說做的更好。

　　優(yōu)點：重量級，功能強大，涵蓋了各行各業(yè)所需的各種圖表，文檔、實例豐富，效果不錯。

　　缺點：使用起來麻煩，需要進(jìn)行各種配置，如果配置出錯則無法顯示，其原理是根據(jù)所配置的圖表類型及傳入的數(shù)據(jù)生成一張張圖片，然后在頁面上顯示相應(yīng)的圖片，應(yīng)用面窄，無法在頁面中大量使用，在asp.net下使用起來比較麻煩。

　　效果如下圖：

　　2、各類js圖表，說到j(luò)s圖表最強大應(yīng)該是google所提供的圖標(biāo)庫了（可能還有我不知道），只需在頁面中引入相應(yīng)的JS庫，然后傳入相應(yīng)的數(shù)據(jù)既可在頁面上繪制。

　　優(yōu)點：輕量級，功能強大，圖表資源豐富，都是通過JS繪制，效果一般，所以運行速度較快，應(yīng)用廣。

　　缺點：文檔、實例相比較少（除了google等幾家專門做JS圖表庫的其他的一些JS圖表文檔都太少），使用起來需要有一定的JS基礎(chǔ)。

　　效果圖如下：

　　3、各類flash圖表，這個就是本文所要介紹的圖表類型了，主要是依靠js或者.NET類庫在頁面輸出XML，flash則是讀取xml在頁面呈現(xiàn)相應(yīng)的數(shù)據(jù)。

　　優(yōu)點：中量級，功能強大，效果絢麗，上手簡單，只需簡單XML基礎(chǔ)既可。

　　缺點：收費，圖表類型沒有上面2種豐富。

　　效果圖如下：

　　以上就是asp.net上常見的圖表類型了，大家可以根據(jù)自己的實際需求選擇圖表。

二、FunsionCharts開發(fā)過程中碰到的問題及解決方法

　　我使用FunsionCharts純粹是個意外，就是有天沒事在逛豬八戒上看別人發(fā)的任務(wù)時候看到需要通過FunsionCharts來實現(xiàn)一些絢麗的圖表效果的時候被吸引住的，那個時候正好項目也需要用到相應(yīng)的圖表。

　　 FunsionCharts是眾多flash圖表中的一個，其內(nèi)置了近40種flash圖表，詳細(xì)使用方法可以移步到天生我豺的博客中查看：點我進(jìn)入，我這邊就不詳細(xì)介紹了。

　　下面介紹下我所碰到的問題：

　　1、圖表輸出方式的選擇

　　FunsionCharts的圖表展示其實最終還是依靠js將圖表所需的數(shù)據(jù)展示傳入flash當(dāng)中，而為了方便asp.net的開發(fā)，F(xiàn)unsionCharts專門封裝了一個DLL用于asp.net向頁面輸出展示圖表的JS，具體的可以查看FunsionCharts官方的示例代碼（文章最后已經(jīng)附上）。

　　所以如果為了想達(dá)到更好的用戶體驗的時候，比如，使用AJAX交互的時候可以直接通過JS調(diào)用FunsionCharts.js文件中相應(yīng)的方法，而如果是進(jìn)行一些企業(yè)級的開發(fā)，或者完全基于asp.net平臺開發(fā)的話則可以調(diào)用FunsionCharts封裝好的DLL方法來使用。

　　在asp.net下使用FunsionCharts非常的簡單，只需根據(jù)其xml規(guī)則，使用拼字符串的方式進(jìn)行拼接，然后通過制定的方法輸出既可，下面看一段示例代碼：

　　01 SqlCommand cmd = new SqlCommand();

　　02 SqlDataReader reader = null;

　　03 StringBuilder sbAges = new StringBuilder();

　　04 List<ChartClass> list = new List<ChartClass>();

　　05 try

　　06 {

　　07 SqlConnection con = new SqlConnection(

　　08 System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

　　09 con.Open();

　　10 cmd.Connection = con;

　　11 cmd.CommandText = "sp_crc_demo_rpt_age";

　　12 cmd.CommandType = CommandType.StoredProcedure;

　　13 cmd.Parameters.Add(&quot;@zoneName", SqlDbType.NVarChar, 64).Value = ucZoneList1.SelectedValue;

　　14 cmd.Parameters.Add("@beginYear", SqlDbType.Int).Value = Convert.ToInt32(txtBeginYear.Text.Trim());

　　15 cmd.Parameters.Add("@endYear", SqlDbType.Int).Value = Convert.ToInt32(txtEndYear.Text.Trim());

　　16 reader = cmd.ExecuteReader();

　　17

　　18 while (reader.Read())

　　19 {

　　20 ChartClass cc = new ChartClass();

　　21 cc.CatName = reader["年齡段"] as string;

　　22 cc.Count = Convert.ToInt32(reader["總數(shù)"]);

　　23 list.Add(cc);

　　24 }

　　25 sbAges.Append(

　　26 "<chart caption='患者年齡對比圖' formatNumberScale='0' xAxisName='年齡段' yAxisName='患病數(shù)'>&quot;);

　　27 for (int i = 0; i < list.Count; i++)

　　28 {

　　29 sbAges.AppendFormat("<set label='{0}' value='{1}' />",

　　30 list[i].CatName, list[i].Count.ToString());

　　31 }

　　32 //添加樣式開始

　　33 sbAges.Append("<styles>");

　　34 sbAges.Append("<definition>");

　　35 sbAges.Append("<style name='titlefont' type='font' size='14'/>");

　　36 sbAges.Append("<style name='axisfont' type='font' size='12'/>");

　　37 sbAges.Append("</definition>");

　　38 sbAges.Append("<application>&quot;);

　　39 sbAges.Append("<apply toObject='Caption' styles='titlefont' /&gt;");

　　40 sbAges.Append("<apply toObject='xAxisName' styles='axisfont' />");

　　41 sbAges.Append("<apply toObject='yAxisName' styles='axisfont' />");

　　42 sbAges.Append("<apply toObject='DATALABELS' styles='axisfont' />");

　　43 sbAges.Append("</application>");

　　44 sbAges.Append("</styles>");

　　45 sbAges.Append("</chart>");

　　46

　　47 if (!IsPostBack)

　　48 {

　　49 ltAgeChart.Text = FusionCharts.RenderChartHTML("FunsionCharts/Column3D.swf",

　　50 "", sbAges.ToString(), "YearAgeChart&quot;, "600", "250", false, false);

　　51 ltAgeChartTable.Text = FusionCharts.RenderChartHTML("FunsionCharts/Bar2D.swf",

　　52 "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false);

　　53 }

　　54 else

　　55 {

　　56 ltAgeChart.Text = FusionCharts.RenderChart("FunsionCharts/Column3D.swf",

　　57 "", sbAges.ToString(), "YearAgeChart", "600", "250", false, false);

　　58 ltAgeChartTable.Text = FusionCharts.RenderChart("FunsionCharts/Bar2D.swf",

　　59 "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false);

　　60 }

　　61 }

　　這段代碼的主要步驟：

　　1、根據(jù)條件到數(shù)據(jù)庫中獲取相應(yīng)數(shù)據(jù)。

　　2、將數(shù)據(jù)拼接成指定的XML，有關(guān)XML的格式可以查看官方API：點我進(jìn)入。

　　3、使用FusionCharts.RenderChart方法來輸出相應(yīng)的JS腳本。

　　其最終輸出的JS如下：

　　1 var chart_YearAgeChartTable = new FusionCharts("FunsionCharts/Bar2D.swf", "YearAgeChartTable", "600", "250", "0", "0", "", "noScale", "EN&quot; );

　　2 chart_YearAgeChartTable.setDataXML("<chart caption='患者年齡對比圖' formatNumberScale='0' xAxisName='年齡段' yAxisName='患病數(shù)'><set label='0-10' value='0' /><set label='11-20' value='289' /><set label='21-30' value='538' /><set label='31-40' value='188' /><set label='41-50' value='357' /><set label='61以上' value='75' /><styles><definition><style name='titlefont' type='font' size='14'/><style name='axisfont' type='font' size='12'/></definition><application><apply toObject='Caption' styles='titlefont' /><apply toObject='xAxisName' styles='axisfont' /><apply toObject='yAxisName' styles='axisfont' /><apply toObject='DATALABELS' styles='axisfont' /></application></styles></chart>");

　　3 chart_YearAgeChartTable.render("YearAgeChartTableDiv");

　　效果圖如下：

三、對FunsionCharts進(jìn)行樣式自定義

　　在上面的圖中我們可以發(fā)現(xiàn)其中漢字部分【患者年齡對比圖】以及【患病數(shù)】2段文字都比較小，實際使用過程中效果很不好，所以這時需要更改其字體樣式。

　　在FunsionCharts的XML數(shù)據(jù)中有個專門的<styles>標(biāo)簽用于定義flash顯示圖標(biāo)的樣式，其主要分2步：

1、定義樣式，在<styles>下新增<definition>，然后在其中定義想要的樣式

2、應(yīng)用樣式，在<styles>下新增<application>，然后將已經(jīng)定義好的樣式應(yīng)用到圖表上，需要注意的是應(yīng)用樣式的時候所引用的對象必須是圖表已有的對象，而這些對象都有自己的命名，不了解的朋友可以查看API。

　　其具體的應(yīng)用代碼如下：

　　01 //添加樣式開始

　　02 sbAges.Append("<styles>");

　　03 sbAges.Append("<definition>");

　　04 sbAges.Append("<style name='titlefont' type='font' size='14'/>");

　　05 sbAges.Append("<style name='axisfont' type='font' size='12'/>");

　　06 sbAges.Append("</definition>");

　　07 sbAges.Append("<application>");

　　08 sbAges.Append("<apply toObject='Caption' styles='titlefont' />");

　　09 sbAges.Append("<apply toObject='xAxisName' styles='axisfont' />");

　　10 sbAges.Append("<apply toObject='yAxisName' styles='axisfont' />");

　　11 sbAges.Append("<apply toObject='DATALABELS' styles='axisfont' />");

　　12 sbAges.Append("</application>");

　　13 sbAges.Append("</styles>");

　　這樣引用過以后，再輸出圖表效果就立刻顯現(xiàn)出來了，標(biāo)題及相應(yīng)的文字都變大了，如下圖：

　　當(dāng)然FunsionCharts還有許多強大功能，可以定義許多絢麗的樣式效果，實現(xiàn)與程序的互動等等，這些都需要自己查看API了，我并沒有更深入的研究。