How to Use the highcharts chart statistics Control

1. First reference the JS File

 

When referencing the above file, make sure that the jquery. js file has been referenced. And the location is before the above two files.

2.

1 <Div id = "Container" style = "Min-width: 400px; Height: 400px; margin: 0 auto "> </div> 2 3 <SCRIPT type =" text/JavaScript "> 5 $. post ('/JSON/jsonsignlist /? OP = '+ $ ("# op "). val () + "& date =" + $ ("# date "). val (), function (data) {6 var DATA = data. content; 7 var x = new array (); 8 var y = new array (); 9 for (VAR I = 0; I <data. length; I ++) {10 x [I] = data [I]. ID; 11 y [I] = data [I]. name; 12} 13 show (x, y); 14}); 15 16 function show (x, y) {17 $ ('# iner '). highcharts ({18 chart: {19 type: 'column '20}, 21 title: {22 text: 'intuitively statistical analysis of the number of online reporters '23}, 24 LANG: {// This is modified to improve the download speed to Chinese characters. in JS, the modification is almost exhausting 25 // exportbuttontitle: 'export ', 26 // printbuttontitle: 'print', 27 // exportchart: 'export ', 28 printchart: 'print ', 29 downloadjpeg: "Download JPEG image", 30 downloadpdf: "Download PDF Document", 31 downloadpng: "Download PNG Image", 32 downloadsvg: "Download SVG vector image" 33 }, 34 xaxis: {35 // categories: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun', 'jul ', 'up', 'up', 'oct', 'nov', 'dec '] 36 categories: x37}, 38 yaxis: {39 min: Title: {41 text: ''42} 43}, 44 tooltip: {45 headerformat: '<span style = "font-size: 10px"> {point. key} </span> <Table> ', 46 pointformat:' <tr> <TD style = "color: {series. color}; padding: 0 "> {series. name }:</TD> '+ 47' <TD style = "padding: 0"> <B> {point. y} </B> </TD> </tr> ', 48 footerformat:' </table> ', 49 shared: True, 50 usehtml: true51}, 52 plotoptions: {53 column: {54 pointpadding: 0.2, 55 borderwidth: 056} 57}, 58 series: [{59 name: 'number of online Reporters ', 60 // data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 61 data: y62}] 63}); 64} 65 //}); 66 </SCRIPT>

3. JSON data method

// Chart statistics public actionresult jsonsignlist (INT op, string date) {jsondata ret = new jsondata (); netsignrepository rep = new netsignrepository (); try {If (OP = 1) {ret. content = rep. countnetsign (OP, date ). select (E => New {id = E. date, name = E. count});} else if (OP = 2) {ret. content = rep. countnetsign (OP, date ). select (E => New {id = E. hour, name = E. count}) ;}} catch (exception ex) {ret. success = false; ret. errormessage = ex. message;} return JSON (RET );}}

Public ienumerable <analyseitem> countnetsign (INT op, string date) {ienumerable <netsign> DATA = dB. netsign; var query = default (ienumerable <analyseitem>); Switch (OP) {Case 1: // analyze query by date = from P in Data Group P by new {date = string. format ("{0: yyyy-mm-dd}", p. addtime)} into G select new analyseitem {date = G. key. date, Count = G. count ()}; break; Case 2: // analyze data = data by time period. where (E => string. format ("{0: yyyy-mm-dd}", E. addtime) = date); query = from P in Data Group P by new {hour = string. format ("{0: hh}", p. addtime) + ": 00-" + String. format ("{0: hh}", p. addtime) + ": 59"} into G select new analyseitem {hour = G. key. hour, Count = G. count ()}; break;} return query ;}