1.js里的写法:

$(function () {
draw();//打开页面时呈现

})
function draw() {

var arrLoginName = [], arrLiveness = [];//highchart能读出的都是数组,因此,你的定义的参数都应是数组
var form = $(“form”).serialize();
$.ajax({
url: “/FFManager/Statistics/GetCustomerIncome/”,
type: “POST”,
async: false,//同步刷新ajax,这个很重要,否则加载不上数据
cache: false,
dataType: “json”,
data: form,
success: function (data, textStatus, xmlHttpRequest) {

var result = data,//从c#后端获取的数据
rows = result.rows;

if (!!rows) {
for (var i = 0, length = rows.length; i < length; i++) {
arrLoginName.push(rows[i].LoginName);
arrLiveness.push(rows[i].Price);
}
}
},
error: function (xmlHttpRequest, textStatus, errorThrown) {

}
});

 

$(\’#canvasParent\’).highcharts({
chart: {
type: \’column\’
},
title: {
text: \’客户分答收入\’,
style: {
color: \’#6495ED\’,
fontWeight: \’bold\’,
fontSize: \’20px\’
}
},
xAxis: {
categories: arrLoginName,//后台传过来的x轴的数据
title: {
text: \’客户\’
}
},
yAxis: {
min: 0,
title: {
text: \’金额(元)\’,
align: \’high\’
},
labels: {
overflow: \’justify\’
}
},
tooltip: {
valueSuffix: null
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: \’vertical\’,
align: \’right\’,
verticalAlign: \’top\’,
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \’#FFFFFF\’),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: \’客户分答收入\’,
data: arrLiveness //后端传过来的y轴的数据  就这两个数据很重要,其他可以粘贴复制
}]
});
}

 

 

后端数据(c#):

public JsonResult GetCustomerIncome(FormCollection form)
{
String strStartTime = form[“StartTime”] ?? “”;
String strEndTime = form[“EndTime”] ?? “”;
int count = Convert.ToInt32(form[“SelectCount”] ?? “0”);
// 时间间隔
String strInterval = form[“Interval”] ?? “”;
// 时间指定
String strAssign = form[“Assign”] ?? “”;

IList<Model.RunUI.CustomerIncome> lectureIncomeList = bllStatistics.GetCustomerIncome(strStartTime, strEndTime, strInterval, strAssign, CurrentUser.EmployeeID);

if (lectureIncomeList == null) return Json(new object[] { }, JsonRequestBehavior.AllowGet);
var data = lectureIncomeList.Select(m => new
{
m.CustomerID,
m.LoginName,
m.NickName,
m.TrueName,
m.Price, // 收入金额
m.dateTime, // 时间
}).Take(count);
return Json(new { rows = data }, JsonRequestBehavior.AllowGet);
}

* 后端里面有price,和loginname两个字段,这两个字段分别作为y和x轴,在js里转为数组,挨个对应显示*

 

版权声明:本文为fuyanzheng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/fuyanzheng/p/5857353.html