阿里云G2图表+Sqlserver+Asp.net MVC 开发
2017-09-06 本文已影响51人
Hubert_Biyo
1、何为G2:
G2 (The Grammar Of Graphics) 是一个由纯 JavaScript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由地定制图表,是为大数据时代而准备的强大的可视化工具。
2、G2图表简单的例子:
阿里云用demo 地址为:https://antv.alipay.com/g2/doc
3、G2数据由sqlserver提供,通过ashx一般处理程序+ajax获取数据库中的数据并转换为json数据,供G2使用,展示出图表
页面显示代码：
@{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- 引入在线资源 -->
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.9/index.js"></script>
</head>
<body>
<div id="c1"></div>
<script type="text/javascript">
$.ajax({
type: "post",
async: true,
url: "/GetSqlJYSum.ashx",
data: { cmd: "test" },//发送到服务器的参数
datatype: "json",
success: function (result) {
//alert("执行ajax方法");
if (result) {
//alert(result);
var data = JSON.parse(result);
var chart = new G2.Chart({
id: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300, // 指定图表高度
plotCfg: {
margin: [50, 50, 80, 100] //上右下左
}
});
// Step 2: 载入数据源,定义列信息
chart.source(data, {
Month: {
alias: '年份' // 列定义，定义该属性显示的别名
},
Num: {
alias: '数量'
}
});
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('Month*Num').color('Month')
// Step 4: 渲染图表
chart.render();
}
},
error: function (errorMsg) {
alert("request data failed!!!");
}
});
</script>
</body>
</html>
一般处理程序代码如下：
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace MVCG2Demo
{
/// <summary>
/// GetSqlJYSum 的摘要说明
/// </summary>
public class GetSqlJYSum : IHttpHandler
{
//设置数据库连接
public static string con = ConfigurationManager.AppSettings["ConnectionEduString"];
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
//SeriesseriesObj=newSeries();
string result = "";
public void ProcessRequest(HttpContext context)
{
//获取一同发送过来的参数
//stringcommand=context.Request["cmd"];
context.Response.ContentType = "text/plain";
//用来传回去的内容
//context.Response.Write("HelloWorld");
Get_Data01(context);
}
public void Get_Data01(HttpContext context)
{
string sql = @"SELECT LEFT ( b.zhanhuiname , 4 ) AS zhanhuiname ,
COUNT(*) AS SignUpSum
FROM zhanhuiguanlian a
INNER JOIN dbo.zhanhui b ON a.zhanhuiid = b.ID
GROUP BY b.zhanhuiname
ORDER BY b.zhanhuiname";
ds = GetDataFromDatabase(sql);
lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { Month = dr["zhanhuiname"], Num = dr["SignUpSum"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
public DataSet GetDataFromDatabase(string sql)
{
ds = new DataSet();
adapter = new SqlDataAdapter(sql, con);
adapter.Fill(ds);
return ds;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
4、如图
用G2形成的图表
4、G2图表KPI文档：https://antv.alipay.com/g2/api/index.html
