[項目過程中所遇到的各種問題記錄]圖表篇——asp.net上不錯的圖表選擇—FunsionCharts
?????? 在上一篇文章中我介紹了winforms下的圖表控件——MSChart，雖然MSChart同樣為我們提供了asp.net上的圖表支持，但是實際的使用過程卻不怎么如意，所以后來正巧在豬八戒上閑逛有人要求使用FunsionCharts這種flash圖表來進行展示，所以花了點時間學(xué)習(xí)了下，本文就是針對FunsionCharts的一些使用問題進行記錄。
以下是本文所要介紹的內(nèi)容：
1、asp.net下的圖表選擇簡介
2、FunsionCharts開發(fā)過程中碰到的問題及解決方法。
?
一、asp.net下的圖表選擇簡介
????? 相比winforms上只能通過一個個控件來展示數(shù)據(jù)來說，asp.net上要進行圖表的展示的選擇就多了很多，下面我簡單的對幾種選擇進行介紹，主要是針對其優(yōu)缺點：
1、MSChart，微軟封裝好的圖表控件，微軟自家的東西，當然還有一些其他的圖表控件，不過MSChart相對來說做的更好。
優(yōu)點：重量級，功能強大，涵蓋了各行各業(yè)所需的各種圖表，文檔、實例豐富，效果不錯。
缺點：使用起來麻煩，需要進行各種配置，如果配置出錯則無法顯示，其原理是根據(jù)所配置的圖表類型及傳入的數(shù)據(jù)生成一張張圖片，然后在頁面上顯示相應(yīng)的圖片，應(yīng)用面窄，無法在頁面中大量使用，在asp.net下使用起來比較麻煩。
效果如下圖：
2、各類js圖表，說到j(luò)s圖表最強大應(yīng)該是google所提供的圖標庫了（可能還有我不知道），只需在頁面中引入相應(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圖表，詳細使用方法可以移步到天生我豺的博客中查看：點我進入，我這邊就不詳細介紹了。
下面介紹下我所碰到的問題：
1、圖表輸出方式的選擇
FunsionCharts的圖表展示其實最終還是依靠js將圖表所需的數(shù)據(jù)展示傳入flash當中，而為了方便asp.net的開發(fā)，FunsionCharts專門封裝了一個DLL用于asp.net向頁面輸出展示圖表的JS，具體的可以查看FunsionCharts官方的示例代碼（文章最后已經(jīng)附上）。
所以如果為了想達到更好的用戶體驗的時候，比如，使用AJAX交互的時候可以直接通過JS調(diào)用FunsionCharts.js文件中相應(yīng)的方法，而如果是進行一些企業(yè)級的開發(fā)，或者完全基于asp.net平臺開發(fā)的話則可以調(diào)用FunsionCharts封裝好的DLL方法來使用。
在asp.net下使用FunsionCharts非常的簡單，只需根據(jù)其xml規(guī)則，使用拼字符串的方式進行拼接，然后通過制定的方法輸出既可，下面看一段示例代碼：
view source print?
| 01 | SqlCommand cmd = new SqlCommand(); |
| 02 | SqlDataReader reader = null; |
| 03 | StringBuilder sbAges = new StringBuilder(); |
| 04 | List<ChartClass> list = new List<ChartClass>(); |
| 07 | ????SqlConnection con = new SqlConnection( |
| 08 | ????????System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString); |
| 10 | ????cmd.Connection = con; |
| 11 | ????cmd.CommandText = "sp_crc_demo_rpt_age"; |
| 12 | ????cmd.CommandType = CommandType.StoredProcedure; |
| 13 | ????cmd.Parameters.Add("@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(); |
| 18 | ????while (reader.Read()) |
| 20 | ????????ChartClass cc = new ChartClass(); |
| 21 | ????????cc.CatName = reader["年齡段"] as string; |
| 22 | ????????cc.Count = Convert.ToInt32(reader["總數(shù)"]); |
| 26 | ????????"<chart caption='患者年齡對比圖' formatNumberScale='0' xAxisName='年齡段'? yAxisName='患病數(shù)'>"); |
| 27 | ????for (int i = 0; i < list.Count; i++) |
| 29 | ????????sbAges.AppendFormat("<set label='{0}' value='{1}' />",? |
| 30 | ????????????list[i].CatName, list[i].Count.ToString()); |
| 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>"); |
| 39 | ????sbAges.Append("<apply toObject='Caption' styles='titlefont' />"); |
| 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>"); |
| 49 | ????????ltAgeChart.Text = FusionCharts.RenderChartHTML("FunsionCharts/Column3D.swf",? |
| 50 | ????????????"", sbAges.ToString(), "YearAgeChart", "600", "250", false, false); |
| 51 | ????????ltAgeChartTable.Text = FusionCharts.RenderChartHTML("FunsionCharts/Bar2D.swf",? |
| 52 | ????????????"", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false); |
| 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); |
這段代碼的主要步驟：
1、根據(jù)條件到數(shù)據(jù)庫中獲取相應(yīng)數(shù)據(jù)。
2、將數(shù)據(jù)拼接成指定的XML，有關(guān)XML的格式可以查看官方API：點我進入。
3、使用FusionCharts.RenderChart方法來輸出相應(yīng)的JS腳本。
其最終輸出的JS如下：
view source print?
| 1 | var chart_YearAgeChartTable = new FusionCharts("FunsionCharts/Bar2D.swf", "YearAgeChartTable", "600", "250", "0", "0", "", "noScale", "EN" ); |
| 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進行樣式自定義
在上面的圖中我們可以發(fā)現(xiàn)其中漢字部分【患者年齡對比圖】以及【患病數(shù)】2段文字都比較小，實際使用過程中效果很不好，所以這時需要更改其字體樣式。
在FunsionCharts的XML數(shù)據(jù)中有個專門的<styles>標簽用于定義flash顯示圖標的樣式，其主要分2步：
1、定義樣式，在<styles>下新增<definition>，然后在其中定義想要的樣式
2、應(yīng)用樣式，在<styles>下新增<application>，然后將已經(jīng)定義好的樣式應(yīng)用到圖表上，需要注意的是應(yīng)用樣式的時候所引用的對象必須是圖表已有的對象，而這些對象都有自己的命名，不了解的朋友可以查看API。
其具體的應(yīng)用代碼如下：
view source print?
| 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)出來了，標題及相應(yīng)的文字都變大了，如下圖：
?
當然FunsionCharts還有許多強大功能，可以定義許多絢麗的樣式效果，實現(xiàn)與程序的互動等等，這些都需要自己查看API了，我并沒有更深入的研究。
?
官方示例程序下載：點我下載
?
話說，各位看過的朋友如果覺得本文對您還有點用，或者覺得本文還有價值的話，麻煩將鼠標移到【推薦】上，幫我點擊下，非常非常的感謝!
?
項目過程中所遇到的各種問題記錄
編輯器篇：
??????? FCKeditor相關(guān)知識及各種常見使用問題
??????? FCKeditor自定義上傳路徑配置
??????? 使用FCKeditor生成靜態(tài)分頁HTML
圖表篇：
??????? 有關(guān)MSChart的一些小技巧
??????? asp.net上不錯的圖表選擇—FunsionCharts
ORM篇：
??????? 使用NHibernate配置對象實體的一些小問題
??????? 有關(guān)NHibernate查詢封裝
作者：
kyo-yo出處：
http://kyo-yo.cnblogs.com 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權(quán)利。
2010中國十大杰出IT博客大賽我的參賽主頁：
點我進入 大家如果有閑票就投一下吧，拜謝了！
轉(zhuǎn)載于:https://www.cnblogs.com/dajiang02/archive/2010/12/23/1914687.html
總結(jié)
以上是生活随笔為你收集整理的[项目过程中所遇到的各种问题记录]图表篇——asp.net上不错的图表选择—FunsionCharts...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
