[項目過程中所遇到的各種問題記錄]圖表篇——asp.net上不錯的圖表選擇—FunsionCharts

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

以下是本文所要介紹的內容：

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

2、FunsionCharts開發過程中碰到的問題及解決方案。

 

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

      相比winforms上只能通過一個個控制項來展示資料來說，asp.net上要進行圖表的展示的選擇就多了很多，下面我簡單的對幾種選擇進行介紹，主要是針對其優缺點：

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

優點：重量級，功能強大，涵蓋了各行各業所需的各種圖表，文檔、執行個體豐富，效果不錯。

缺點：使用起來麻煩，需要進行各種配置，如果配置出錯則無法顯示，其原理是根據所配置的圖表類型及傳入的資料產生一張張圖片，然後在頁面上顯示相應的圖片，應用面窄，無法在頁面中大量使用，在asp.net下使用起來比較麻煩。

效果如：

2、各類js圖表，說到js圖表最強大應該是google所提供的表徵圖庫了（可能還有我不知道），只需在頁面中引入相應的JS庫，然後傳入相應的資料既可在頁面上繪製。

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

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

如下：

3、各類flash圖表，這個就是本文所要介紹的圖表類型了，主要是依靠js或者.NET類庫在頁面輸出XML，flash則是讀取xml在頁面呈現相應的資料。

優點：中量級，功能強大，效果絢麗，上手簡單，只需簡單XML基礎既可。

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

如下：

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

 

二、FunsionCharts開發過程中碰到的問題及解決方案。

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

      FunsionCharts是眾多flash圖表中的一個，其內建了近40種flash圖表，詳細使用方法可以移步到天生我豺的部落格中查看：點我進入，我這邊就不詳細介紹了。

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

1、圖表輸出方式的選擇

FunsionCharts的圖表展示其實最終還是依靠js將圖表所需的資料展示傳入flash當中，而為了方便asp.net的開發，FunsionCharts專門封裝了一個DLL用於asp.net向頁面輸出展示圖表的JS，具體的可以查看FunsionCharts官方的範例程式碼（文章最後已經附上）。

所以如果為了想達到更好的使用者體驗的時候，比如，使用AJAX互動的時候可以直接通過JS調用FunsionCharts.js檔案中相應的方法，而如果是進行一些企業級的開發，或者完全基於asp.net平台開發的話則可以調用FunsionCharts封裝好的DLL方法來使用。

在asp.net下使用FunsionCharts非常的簡單，只需根據其xml規則，使用拼字串的方式進行拼接，然後通過制定的方法輸出既可，下面看一段範例程式碼：

SqlCommand cmd = new SqlCommand();SqlDataReader reader = null;StringBuilder sbAges = new StringBuilder();List<ChartClass> list = new List<ChartClass>();try{    SqlConnection con = new SqlConnection(        System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);    con.Open();    cmd.Connection = con;    cmd.CommandText = "sp_crc_demo_rpt_age";    cmd.CommandType = CommandType.StoredProcedure;    cmd.Parameters.Add("@zoneName", SqlDbType.NVarChar, 64).Value = ucZoneList1.SelectedValue;    cmd.Parameters.Add("@beginYear", SqlDbType.Int).Value = Convert.ToInt32(txtBeginYear.Text.Trim());    cmd.Parameters.Add("@endYear", SqlDbType.Int).Value = Convert.ToInt32(txtEndYear.Text.Trim());    reader = cmd.ExecuteReader();    while (reader.Read())    {        ChartClass cc = new ChartClass();        cc.CatName = reader["年齡段"] as string;        cc.Count = Convert.ToInt32(reader["總數"]);        list.Add(cc);    }    sbAges.Append(        "<chart caption='患者年齡對比圖' formatNumberScale='0' xAxisName='年齡段'  yAxisName='患病數'>");    for (int i = 0; i < list.Count; i++)    {        sbAges.AppendFormat("<set label='{0}' value='{1}' />",             list[i].CatName, list[i].Count.ToString());    }    //添加樣式開始    sbAges.Append("<styles>");    sbAges.Append("<definition>");    sbAges.Append("<style name='titlefont' type='font' size='14'/>");    sbAges.Append("<style name='axisfont' type='font' size='12'/>");    sbAges.Append("</definition>");    sbAges.Append("<application>");    sbAges.Append("<apply toObject='Caption' styles='titlefont' />");    sbAges.Append("<apply toObject='xAxisName' styles='axisfont' />");    sbAges.Append("<apply toObject='yAxisName' styles='axisfont' />");    sbAges.Append("<apply toObject='DATALABELS' styles='axisfont' />");    sbAges.Append("</application>");    sbAges.Append("</styles>");    sbAges.Append("</chart>");    if (!IsPostBack)    {        ltAgeChart.Text = FusionCharts.RenderChartHTML("FunsionCharts/Column3D.swf",             "", sbAges.ToString(), "YearAgeChart", "600", "250", false, false);        ltAgeChartTable.Text = FusionCharts.RenderChartHTML("FunsionCharts/Bar2D.swf",             "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false);    }    else    {        ltAgeChart.Text = FusionCharts.RenderChart("FunsionCharts/Column3D.swf",             "", sbAges.ToString(), "YearAgeChart", "600", "250", false, false);        ltAgeChartTable.Text = FusionCharts.RenderChart("FunsionCharts/Bar2D.swf",             "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false);    }}

這段代碼的主要步驟：

1、根據條件到資料庫中擷取相應資料。

2、將資料拼接成指定的XML，有關XML的格式可以查看官方API：點我進入。

3、使用FusionCharts.RenderChart方法來輸出相應的JS指令碼。

其最終輸出的JS如下：

var chart_YearAgeChartTable = new FusionCharts("FunsionCharts/Bar2D.swf", "YearAgeChartTable", "600", "250", "0", "0", "", "noScale", "EN" );chart_YearAgeChartTable.setDataXML("<chart caption='患者年齡對比圖' formatNumberScale='0' xAxisName='年齡段'  yAxisName='患病數'><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>");chart_YearAgeChartTable.render("YearAgeChartTableDiv");

如下：

 

二、對FunsionCharts進行樣式自訂

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

在FunsionCharts的XML資料中有個專門的<styles>標籤用於定義flash顯示表徵圖的樣式，其主要分2步：

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

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

其具體的應用代碼如下：

//添加樣式開始sbAges.Append("<styles>");sbAges.Append("<definition>");sbAges.Append("<style name='titlefont' type='font' size='14'/>");sbAges.Append("<style name='axisfont' type='font' size='12'/>");sbAges.Append("</definition>");sbAges.Append("<application>");sbAges.Append("<apply toObject='Caption' styles='titlefont' />");sbAges.Append("<apply toObject='xAxisName' styles='axisfont' />");sbAges.Append("<apply toObject='yAxisName' styles='axisfont' />");sbAges.Append("<apply toObject='DATALABELS' styles='axisfont' />");sbAges.Append("</application>");sbAges.Append("</styles>");

這樣引用過以後，再輸出圖表效果就立刻顯現出來了，標題及相應的文字都變大了，如：

 

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

 

官方樣本程式下載：點我下載

 

話說，各位看過的朋友如果覺得本文對您還有點用，或者覺得本文還有價值的話，麻煩將滑鼠移到【推薦】上，幫我點擊下，非常非常的感謝!

 

項目過程中所遇到的各種問題記錄

編輯器篇：

        FCKeditor相關知識及各種常見使用問題

        FCKeditor自訂上傳路徑配置

        使用FCKeditor產生靜態分頁HTML

圖表篇：

        有關MSChart的一些小技巧

        asp.net上不錯的圖表選擇—FunsionCharts

ORM篇：

        使用NHibernate設定物件實體的一些小問題

        有關NHibernate查詢封裝

部署篇：

        項目部署過程中那些糾結的問題-IIS

        項目部署過程中那些糾結的問題-SQLServer

工具篇：

        .NET開發時常用的工具類庫