Teach you to make a simple highchart.js chart

1.js notation:

$ (function () {
Draw ();//Render when page is opened

})
function Draw () {

var arrloginname = [], arrliveness = [];//highchart can read the array, so your defined parameters should be an array
var form = $ ("form"). Serialize ();
$.ajax ({
URL: "/ffmanager/statistics/getcustomerincome/",
Type: "POST",
async:false,//Synchronous Refresh Ajax, this is very important, otherwise loading data
Cache:false,
DataType: "JSON",
Data:form,
Success:function (data, Textstatus, XMLHttpRequest) {

var result = data,//Data obtained from the C # back end
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: ' Customer points out revenue ',
Style: {
Color: ' #6495ED ',
FontWeight: ' Bold ',
FontSize: ' 20px '
}
},
Xaxis: {
CategoriesArrloginname,//The data of the x-axis transmitted over the background
Title: {
Text: ' Client '
}
},
YAxis: {
min:0,
Title: {
Text: ' Amount (yuan) ',
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: ' Customer answers revenue ',
DataarrlivenessThe back end of the y-axis data is important for these two data, others can be pasted copy
}]
});
}

Back-end data (C #):

Public Jsonresult getcustomerincome (formcollection form)
{
String strstarttime = form["StartTime"]?? "";
String strendtime = form["EndTime"]?? "";
int count = Convert.ToInt32 (form["SelectCount"]?? "0");
Time interval
String strinterval = form["Interval"]?? "";
Time designation
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,//Income amount
M.datetime,//Time
}). Take (count);
Return Json (New {rows = data}, Jsonrequestbehavior.allowget);
}

* The back end has price, and loginname two fields, the two fields as Y and X axis, in JS into an array, each corresponding display *

Teach you to make a simple highchart.js chart