相比winforms上只能通過(guò)一個(gè)個(gè)控件來(lái)展示數(shù)據(jù)來(lái)說(shuō)，asp.net上要進(jìn)行圖表的展示的選擇就多了很多，其中的FusionCharts最近的新版能夠?qū)崿F(xiàn)導(dǎo)出圖表為圖像。

對(duì)于使用FusionCharts的人呢，在項(xiàng)目開發(fā)中可能會(huì)遇見下面的問(wèn)題：

1、圖表輸出方式的選擇

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

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

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

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["總數(shù)"]); 
        list.Add(cc); 
    } 
    sbAges.Append( 
        "<chart caption='患者年齡對(duì)比圖' formatNumberScale='0' xAxisName='年齡段'  yAxisName='患病數(shù)'>"); 
    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("FusionCharts/Column3D.swf",  
            "", sbAges.ToString(), "YearAgeChart", "600", "250", false, false); 
        ltAgeChartTable.Text = FusionCharts.RenderChartHTML("FusionCharts/Bar2D.swf",  
            "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false); 
    } 
    else
    { 
        ltAgeChart.Text = FusionCharts.RenderChart("FusionCharts/Column3D.swf",  
            "", sbAges.ToString(), "YearAgeChart", "600", "250", false, false); 
        ltAgeChartTable.Text = FusionCharts.RenderChart("FusionCharts/Bar2D.swf",  
            "", sbAges.ToString(), "YearAgeChartTable", "600", "250", false, false); 
    } 
} 

上面的這段代碼將能夠進(jìn)行下面的步驟：

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

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

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

最終輸出的JS如下：

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

患者年齡對(duì)比圖：

2、FusionCharts自定義樣式

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

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

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

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

圖表效果就立刻顯現(xiàn)出來(lái)了，標(biāo)題及相應(yīng)的文字都變大了，如下圖：

當(dāng)然FusionCharts還有許多強(qiáng)大功能，可以定義許多絢麗的樣式效果，實(shí)現(xiàn)與程序的互動(dòng)等等&middot;··