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();
}

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复