彩票走势图

相比winforms上只能通过一个个控件来展示数据来说，asp.net上要进行图表的展示的选择就多了很多，其中的FusionCharts最近的新版能够实现导出图表为图像。

对于使用FusionCharts的人呢，在项目开发中可能会遇见下面的问题：

1、图表输出方式的选择

FusionCharts的图表展示其实最终还是依靠js将图表所需的数据展示传入flash当中，而为了方便asp.net的开发，FusionCharts专门封装了一个DLL用于asp.net向页面输出展示图表的JS，具体的可以查看FusionCharts官方的示例代码（文章最后已经附上）。

 所以如果为了想达到更好的用户体验的时候，比如，使用AJAX交互的时候可以直接通过JS调用FusionCharts.js文件中相应的方法，而如果是进行一些企业级的开发，或者完全基于asp.net平台开发的话则可以调用FusionCharts封装好的DLL方法来使用。

在asp.net下使用FusionCharts非常的简单，只需根据其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("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); 
    } 
} 

上面的这段代码将能够进行下面的步骤：

1、根据条件到数据库中获取相应数据。

2、将数据拼接成指定的XML，有关XML的格式可以查看官方API。

3、使用FusionCharts.RenderChart方法来输出相应的JS脚本。

最终输出的JS如下：

var chart_YearAgeChartTable = new FusionCharts("FusionCharts/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"); 

患者年龄对比图：

2、FusionCharts自定义样式

在上面的图中我们可以发现其中汉字部分【患者年龄对比图】以及【患病数】2段文字都比较小，实际使用过程中效果很不好，所以这时需要更改其字体样式。

在FusionCharts的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>"); 

图表效果就立刻显现出来了，标题及相应的文字都变大了，如下图：

当然FusionCharts还有许多强大功能，可以定义许多绚丽的样式效果，实现与程序的互动等等···