教你做一个简单的highchart.js图表

Posted 2020-08-08

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里转为数组，挨个对应显示*