FusionCharts--加载json文件

   上篇介绍了FusionCharts加载XML文件，这篇将介绍另一种加载方式，使用json串。通常我们在前台使用ajax来异步加载后台的数据，后台处理table数据，转换成json，这样就可以将数据展现给用户。具体的过程如下：

   首先说一下后台获取数据及将数据转换成json格式：     

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.OracleClient;
namespace FusionCharts
{
    /// <summary>
    /// getData 的摘要说明
    /// </summary>
    public class getData : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            context.Response.Write(getAllData(context));
        }

        /// <summary>
        /// 获取数据
        /// </summary>
        /// <param name="context"></param>
        /// <returns>json串</returns>
        public string getAllData(HttpContext context)
        {
            string test = "";
            string connString = @"Data Source=  
                   (DESCRIPTION=  
                   (ADDRESS=(PROTOCOL=TCP)(HOST=127.0.0.1)(PORT=1521))  
                   (CONNECT_DATA=  
                   (SERVICE_NAME=ORCL)));  
                   User Id=drp;Password=drp";

            try
            {
                OracleConnection conn = new OracleConnection(connString);
                string sql = "select name,  sum(case Course when '数学' then Score else null end) Math,         sum(case Course when '英语' then Score else null end) English   from test where name='victor' or name='lucy' or name='Jim'  group by name";
                OracleCommand cmd = new OracleCommand(sql, conn);
                OracleDataAdapter da1 = new OracleDataAdapter(cmd);
                DataSet ds1 = new DataSet();//定义数据集
                da1.Fill(ds1);
                DataTable dt = ds1.Tables[0];
                int rowcount = 0;
                if (dt.Rows.Count > 0)
                {
                    rowcount = dt.Rows.Count;
                }
                test = Dataset2Json(ds1, rowcount);

            }
            catch (Exception ex)
            {
                // Response.Write(ex.Message);
            }
            return test;
        }

        /// <summary>  
        /// DataSet转换成Json格式   
        /// </summary>   
        /// <paramname="ds">DataSet</param>  
        ///<returns></returns>   
        //public static string Dataset2Json(DataSet ds, int Fpage, int FpageSize, int total = -1)
        public static string Dataset2Json(DataSet ds, int total = -1)
        {
            System.Text.StringBuilder json = new System.Text.StringBuilder();

            foreach (DataTable dt in ds.Tables)
            {
                //设置表格属性
                json.Append("{\"chart\":{");
                //表格主题
                json.Append("\"caption\":");
                json.Append("\"成绩分析\",");
                //x轴
                json.Append("\"xAxisname\":");
                json.Append("\"姓名\",");
                //y轴
                json.Append("\"yAxisName\":");
                json.Append("\"成绩\"},");
                //加载具体内容
                json.Append(DataTable2Json(dt));
                json.Append("}");
            } return json.ToString();
        }

        /// <summary>   
        /// dataTable转换成Json格式   
        /// </summary>   
        /// <paramname="dt"></param>   
        ///<returns></returns>   
        //public static string DataTable2Json(DataTable dt, int Zpage, int ZpageSize)
        public static string DataTable2Json(DataTable dt)
        {
            System.Text.StringBuilder jsonBuilder = new System.Text.StringBuilder();
            //设置系列
            jsonBuilder.Append("\"categories\":[{");
            //设置每个系列
            jsonBuilder.Append("\"category\":[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {

                jsonBuilder.Append("{\"label\":\"");
                jsonBuilder.Append(dt.Rows[i][0].ToString());

                jsonBuilder.Append("\"},");

            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            jsonBuilder.Append("]}],");
            //设置系列中的内容
            jsonBuilder.Append("\"dataset\": [");
            for (int i = 0; i < dt.Columns.Count - 1; i++)
            {
                //设置各系列值
                jsonBuilder.Append("{\"seriesname\":\"");
                jsonBuilder.Append(dt.Columns[i + 1].ColumnName);
                jsonBuilder.Append("\",\"data\": [");
                for (int j = 0; j < dt.Rows.Count; j++)
                {                    
                    jsonBuilder.Append("{\"value\": \"");
                    jsonBuilder.Append(dt.Rows[j][i + 1].ToString());

                    jsonBuilder.Append("\"},");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            jsonBuilder.Append("]");

            string jsonstr = jsonBuilder.ToString();
            return jsonstr;

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

   在这里，需要说明一下获取到的 table的数据，如下：

       

   页面设置如下：      

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>    
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td style="width: 50%; height: 50%">
                    <div id="Column2D"></div>
                </td> 
            </tr>         
        </table>

    </form>
</body>
</html>
<script src="FusionCharts/FusionCharts.js"></script>
<script src="jQuery/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    
    var chart1 =
   new FusionCharts('FusionCharts/MSColumn2D.swf', "ChartId", "400", "300");
   
    $.ajax( {
        type: "POST",       
        url: "getData.ashx",
        dataType: "json",
        success: function (data) {            
            chart1.setJSONData(data);
            
        },
        error: function (data) {
          
    }  
    })    
    chart1.render('Column2D');    
    
</script>

   其效果如下：（柱状图2D）

                                 

    同样，跟之前说的一样，替换核心SWF文件即可加载不同样式的 图表，如下效果：

    柱状图3D：

                            

    小结：

       使用json加载与XML加载的基本原理是一样的，我们也可以将table中的数据转换成XML格式来进行加载。需要注意的是在转换的过程中要注意FusionCharts所能识别的格式，它所加载的json格式与我们之前使用ajax+EasyUI加载后台的json串格式有点不同。

       介绍完基本的加载形式之后，下篇介绍一下FusionCharts中的向下钻取。