Highchars

//前台

<script>

$(function () {


//showChat();
initChat();
showPie();
initPie();
})

function initChat() {
var xlst = [];
var ylst = [];

$.ajax({

url: "Handler1.ashx",
data: {},
dataType: "json",
success: function (data) {

data = eva l("(" + 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 = eva l("(" + 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 java scriptSerializer().Serialize(LoadPieData()));
}
else
{
context.Response.Write(new java scriptSerializer().Serialize(LoadOrderData()));
}


}

 

public bool IsReusable
{
get
{
return false;
}
}

//