Chart.js Operation Example (front background interoperability)

Prerequisites: Import Chart.js Required

My project environment is: SPRINGMVC+MONGODB

Controller layer for SPRINGMVC:

/** * Find Financial Information report * @author Liupeng * @param request * @return * @throws unknownhostexception * @throws parseexception */@ Requestmapping (value= "/innerchartoutforfinal") public Modelandview Innerchartout (HttpServletRequest request) throws Unknownhostexception, parseexception{string timestartemp = Request.getparameter ("Timestart") ==null? "": Request.getparameter ("Timestart"). ToString (); String timeendtemp = Request.getparameter ("Timeend") ==null? "": Request.getparameter ("Timeend"). ToString (); String timestart = Getnextdate (timestartemp, 0, Calendar.date, "yyyy-mm-dd");//Gets the day string timeend = Getnextdate ( Timeendtemp, 1, calendar.date, "yyyy-mm-dd");//Get the day after Keyrequestdao Kqdao = new Keyrequestdao (); list<keyrequest> list = Kqdao.findbytimeforfinalcommon (Timestart, timeend); SimpleDateFormat S1 = new SimpleDateFormat ("Yyyy-mm-dd HH:mm:ss"); SimpleDateFormat s2 = new SimpleDateFormat ("YYYY-MM-DD");D ate tempdate =null; String str = NULL;//YYYY-MM-DD HH MM SS converted to Yyyy-mm-ddfor (Keyrequest keyrequest: list) {tempdate = S1.parse (Keyrequest.getkqtimerstart ());//Convert time to date type str = S2.format (S2.parse (S1.format (tempdate )); Keyrequest.setkqtimerstart (str);} Horizontal axis: Time StringBuffer Stringbufferx = new StringBuffer ();//ordinate: financial receivable Amount and actual amount to account stringbuffer stringBufferY1 = new StringBuffer (); StringBuffer stringBufferY2 = new StringBuffer (); String temptime = list.get (0). Getkqtimerstart (); int tempkqautosum = 0;int tempkqaccountsum = 0;for (int i=0;i<list.siz E (); i++) {Keyrequest keyrequest = List.get (i), if (Keyrequest.getkqtimerstart (). Equals (Temptime)) {//Accounts receivable tempkqautosum = Tempkqautosum + integer.parseint (keyrequest.getkqautosum ());//actual to account Tempkqaccountsum = Tempkqaccountsum + Integer.parseint (keyrequest.getkqaccountsum () = = ""? " 0 ": Keyrequest.getkqaccountsum ()); if (I==list.size ()-1) {Stringbufferx.append (" ' "+temptime+" ' ");//must be pieced together in this form, In the foreground of JS can be displayed, this form of data for ' 2014-08-12 ' Stringbufferx.append (","); Stringbuffery1.append (String.valueof (tempkqautosum)) ; Stringbuffery1.append (","); Stringbuffery2.append (String.valuEOf (Tempkqaccountsum)); Stringbuffery2.append (",");}} else {stringbufferx.append ("'" +temptime+ "'"); Stringbufferx.append (","); Stringbuffery1.append (String.valueof ( tempkqautosum)); Stringbuffery1.append (","); Stringbuffery2.append (String.valueof (tempkqaccountsum)); Stringbuffery2.append (","); temptime = Keyrequest.getkqtimerstart (); tempkqautosum = 0;tempkqaccountsum = 0;i--;}} String Strx = stringbufferx.tostring (); String strY1 = stringbuffery1.tostring (); String strY2 = stringbuffery2.tostring (); System.out.println (STRX); System.out.println (strY1); System.out.println (strY2); Request.setattribute ("Strx", Strx); Request.setattribute ("strY1", strY1); Request.setattribute ("StrY2", strY2); Modelandview mv = new Modelandview ("/innerchart"); return Mv;/*keyrequestdao Kqdao = new Keyrequestdao (); list<dbobject> list = kqdao.findbytimeforfinal (timestart,timeend);//Horizontal: Time StringBuffer Stringbufferx = new StringBuffer ();//Ordinate: The amount of financial receivable and the actual amount stringbuffer stringBufferY1 = new StringBuffer (); StringBuffer StringbufferY2 = new StringBuffer (); for (DBObject dbobject:list) {stringbufferx.append (Dbobject.get ("Kq_timer_start")); Stringbufferx.append (","); Stringbuffery1.append (Dbobject.get ("kq_autosum")); Stringbuffery2.append (DbObject.get ("Kq_accountsum"));} String stry1[] = stringbuffery1.tostring (). Split ("_"); String stry2[] = stringbuffery2.tostring (). Split ("_"); System.out.println (Stringbufferx); System.out.println (strY1);  System.out.println (strY2); */}/** * This function is implemented: the given date and the number of days, the result date is calculated where Sdate is the specified date, Idate is the number of time periods (can be the year, month, day ...) Specifically based on ical to determine) ical is a certain time period such as month: Calendar.month (query API in the Calendar Class) Sstr for the date format for example: "YYYYMMDD" (specifically querying the Calendar class in the API) * @param Sdate * @param iDate * @param iCal * @param sStr * @return */public string getnextdate (string sdate, int idate,int ical, S        Tring sStr) {String snextdate = "";        Calendar calendar = Calendar.getinstance ();        SimpleDateFormat formatter = new SimpleDateFormat (SSTR);        Date date = null;        try {date = Formatter.parse (sdate); } catch (ParseException e) {e.printstacktrace ();        } calendar.settime (date);        Calendar.add (ICal, iDate);        Snextdate = Formatter.format (Calendar.gettime ());    return snextdate; }

SPRINGMVC's DAO Layer:

/** * Get all information based on time range * @author Liupeng * @param timestart * @param timeend */public list<keyrequest> Findbytimeforfina Lcommon (String Timestart, String timeend) {list<keyrequest> krlist = new arraylist<keyrequest> (); Basicdbobject obj = new Basicdbobject (), Obj.put ("Kq_timer_start", New Basicdbobject ("$gte", Timestart). Append ("$lt", Timeend)); Try{dbcursor dbcursor = Keyrequest.find (obj). Sort (New Basicdbobject ("Kq_timer_start", 1));//In reverse chronological order, If the data is not sorted, the X coordinate will show the same time list<dbobject> list = Dbcursor.toarray (); for (DBObject dbobject:list) {keyrequest TMP = Setkeyrequest (DBObject); Krlist.add (TMP);}} catch (Exception e) {e.printstacktrace ();} return krlist;}

SPRINGMVC Display Layer:

<%string Strx = (String) request.getattribute ("Strx"); String strY1 = (string) request.getattribute ("strY1"); String strY2 = (string) request.getattribute ("strY2");//"January", "February", "March", "April", "may", "June", "July"%                  ><script> var data = {labels: [<%=strx%>], datasets: [{                    The fill color of the curve FillColor: "Rgba (220,220,220,0.5)",//The color of the border line of the fill block Strokecolor: "Rgba (220,220,220,1)",//The color of the circle that represents the data pointcolor: "Rgba (220,220,220 , 1) ",//The color of the edge of the circle that represents the data pointstrokecolor:" #fff ", Data: [<%=str                      Y1%>]}, {fillcolor: "Rgba (151,187,205,0.5)", Strokecolor: "Rgba (151,187,205,1)", Pointcolor: "Rgba (151,187,205,1)", Poin Tstrokecolor: "#fff", datA: [<%=stry2%>]}]}; var options = {Scaleoverride:false,//Whether the line chart is displayed scaleshowlabels:true,//whether the vertical axis scaleshowgridlines:true,//is displayed The ruler beziercurve:true,//of the axis shows whether the smooth effect is displayed pointdot:true,//whether the vertex of the line chart is displayed pointdotradius:3,//the point size of the line chart Pointdotstrokewid                th:1,//Line Chart Fixed-point peripheral size animation:true,//whether to show the animation effect animationsteps:60,//the speed of graphics display};          var ctx = document.getElementById ("Bar"). GetContext ("2d"); var mynewchart = new Chart (CTX).                Line (data,options);   </script>