fusioncharts在asp.net中的应用

原创于 2017-04-28 17:06:37 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

asp.net 同时被 2 个专栏收录

6 篇文章

订阅专栏

FusionCharts

3 篇文章

订阅专栏

本文介绍如何使用ADO.NET连接数据库并读取表数据，将其转换为XML格式字符串，再通过AJAX和FusionCharts在前端展示图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开始学习这篇内容之前，你需要对fusioncharts有一定的了解，详情请见我另一篇博客手把手教你创建第一个fusioncharts

首先来描述一下整体思路：用ado.net连接数据库，读取table信息存在dataset中，拼接成一个字符串返回给前端，前台用AJAX拿到返回的字符串，用fusioncharts的setxmldata方法将数据画成图显示出来。

step1:在sql server management studio中新建一个表，命名为chart，酱婶儿的

step2：打开VS，新建一个asp.net WebForm项目。一个asp.net WebForm项目是由一个.aspx文件和一个.aspx.cs文件组成，前者是前端页面，后者存放后台逻辑。我们首先来写后台的代码，后台首先需要连接数据库，将chart表中的数据取出来放进dataset中，这里我是直接用DataAdapter填充Dataset，dataset拿到数据后就相当于数据已经放进缓存，可以将connection断掉了。代码如下：

 string connSQL = @"Data server;Initial Catalog= ;Integrated Security=True";
            SqlConnection con = new SqlConnection(connSQL);
            con.Open();
            //Console.WriteLine("connect sucess!");
            SqlDataAdapter da = new SqlDataAdapter("Select * From dbo.chart", con);
            DataSet ds = new DataSet();
            da.Fill(ds, "chart");
            con.Close();
            con.Dispose();

Dataset拿到数据之后，接下来我们把它拼接成符合fusioncharts解析格式的xml字符串，代码如下：

StringBuilder xmlData1 = new StringBuilder();
            xmlData1.Append("
  
   ");
            for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
            {
                xmlData1.AppendFormat("
   ");
            }
          
           
            xmlData1.Append("
  ");
            return xmlData1.ToString();

这一步之后我们已经将数据库中的一张表变成了一个xml格式的字符串，下面就是前端页面来处理这个返回的结果。我将上述代码放到 CreateCharts方法中，这里必须注意一点，这个方法必须定义成static的，而且要声明成webmethod，详情请参阅此篇博客：点击打开链接

step3：前端页面的处理

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="InfoSoftGlobal.WebForm4" %>





My first chart using FusionCharts Suite XT
   


 
  



  
    
  
   直方图

添加FusionCharts的JS文件和JQuary的JS文件，这里一定要注意路径写对了，按照自己工程目录写。

url: "WebForm4.aspx/CreateCharts"这里就是定位到后台代码的CreateCharts方法，拿到这个方法return的字符串

step4：F5运行，结果如下：