FusionCharts--加载json文件_H5之家 - 中国HTML5教程资源分享第一站

FusionCharts--加载json文件

[摘要：上篇先容了FusionCharts减载XML文件，那篇将先容另外一种减载体式格局，应用json串。平常我们正在前台应用ajax去同步减载背景的数据，背景处置惩罚table数据，转换成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=""> <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）