上篇介绍了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=" 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中的向下钻取。