HighChar 案例

Highchars

//前台

<script>
 
$(function () {
 
//showChat();
initChat();
showPie();
initPie();
})
 
function initChat() {
var xlst = [];
var ylst = [];
 
$.ajax({
 
url: "Handler1.ashx",
data: {},
dataType: "json",
success: function (data) {
 
data = eval("(" + data + ")"); //序列化数据
//console.log(data);
 
$.each(data.Table, function (i, j) {
 
xlst.push(parseInt(j.day)); //push 添加数据
ylst.push(parseFloat(j.sum));
 
})
showChat(xlst, ylst);
//console.log(xlst);
//console.log(ylst);
}
})
 
}
 
//第一步 加载静态样式
function showChat(xlst, ylst) {
 
var chart = Highcharts.chart('container', {
chart: {
type: 'spline' //折线图
//type: 'column' //柱状图
},
title: {
text: '网站每日销售统计图'
},
subtitle: {
text: '数据来源: 后台统计'
},
xAxis: {
categories: xlst,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '销售额 (元)'
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} ￥</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '销售统计',
data: ylst
}, ]
});
 
}
 
//饼状图
function initPie() {
var pieArr = [];
$.ajax({
url: "Handler1.ashx",
data: { op: "pie" },
dataType: "json",
success: function (data) {
data = eval("(" + data + ")"); //序列化数据
console.log(data);
$.each(data.Table, function (i,j) {//循环
 
var value = { name: j['OrdertType'], y: parseFloat(j['totalMoney']) };
 
pieArr.push(value);
 
})
 
//调用饼状图方法
showPie(pieArr);
}
 
})
 
}
 
//加载饼图样式
 
function showPie(pieArr) {
console.log(pieArr);
Highcharts.chart('pie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '所有订单销售占比'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: '商品类型',
colorByPoint: true,
data: pieArr
}]
});
 
}
 
</script>
 
//后台
 
public string SqlConnectionString = ConfigurationManager.ConnectionStrings["sqlString"].ConnectionString;
 
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var op = context.Request.QueryString["op"];
if (op == "pie")
{
context.Response.Write(new JavaScriptSerializer().Serialize(LoadPieData()));
}
else
{
context.Response.Write(new JavaScriptSerializer().Serialize(LoadOrderData()));
}
 
}
 
public bool IsReusable
{
get
{
return false;
}
}
 
/// <summary>
/// 加载曲线图
/// </summary>
/// <returns></returns>
public string LoadOrderData()
{
string sql = @"select convert(int,DAY(CreateTime),120) as 'day',sum(OrderAmount)
as 'sum' from OrderInfo group by convert(int,DAY(CreateTime),120)
order by convert(int,DAY(CreateTime),120) asc";
 
DataSet ds = SqlHelper.ExecuteDataset(SqlConnectionString, CommandType.Text, sql);
//调用方法将dataset转换为json格式的数据
var result = GetJsonByDataset(ds);
 
return result;
}
 
/// <summary>
/// 统计每个订单类型的销售额
/// </summary>
/// <returns></returns>
public string LoadPieData()
{
string sql = @"select SUM(OrderAmount) as totalMoney,OrdertType=Case OrdertType
when 1 then '家电'
when 2 then '生活用品'
else '其他' end
from OrderInfo group by(OrdertType)
";
 
DataSet ds = SqlHelper.ExecuteDataset(SqlConnectionString, CommandType.Text, sql);
//调用方法将dataset转换为json格式的数据
var result = GetJsonByDataset(ds);
return result;
}
 
//StringBuilder 如果是长字符串拼接就用stringbuilder(比如sql拼接，html拼接)
 
//string 如果是短字符串拼接就用string
 
/// 把dataset数据转换成json的格式
/// </summary>
/// <param name="ds">dataset数据集</param>
/// <returns>json格式的字符串</returns>
public static string GetJsonByDataset(DataSet ds)
{
if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
{
//如果查询到的数据为空则返回标记ok:false
return "{\"ok\":false}";
}
StringBuilder sb = new StringBuilder();
sb.Append("{\"ok\":true,");
foreach (DataTable dt in ds.Tables)
{
sb.Append(string.Format("\"{0}\":[", dt.TableName));
 
foreach (DataRow dr in dt.Rows)
{
sb.Append("{");
for (int i = 0; i < dr.Table.Columns.Count; i++)
{
sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\\"").Replace("\'", "\\\'"), ObjToStr(dr[i]).Replace("\"", "\\\"").Replace("\'", "\\\'")).Replace(Convert.ToString((char)13), "\\r\\n").Replace(Convert.ToString((char)10), "\\r\\n");
}
sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("},");
}
 
sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("],");
}
sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("}");
return sb.ToString();
}
 
/// <summary>
/// 将object转换成为string
/// </summary>
/// <param name="ob">obj对象</param>
/// <returns></returns>
public static string ObjToStr(object ob)
{
if (ob == null)
{
return string.Empty;
}
else
return ob.ToString();
}