JSCHART components use detailed

What is JSCHART? JSCHART can generate icons on the web page, which is often used for statistics, very easy to use a JS component.

Using JSCHART

. Import JSCHARTS.JS

II. Write a JSCHARTS.JSP test page

1. Download the JSCharts library to download the Jscharts library from the official website, we use the jscharts.js file inside the compressed package. It approximately 150kb.

With the JSCharts library in web files (such as .html or .jsp) contain JSCHARTS libraries.

  Defines the image to be generated by the container to display JsCharts on the web page, need Put this image into the webpage container. This web container we usually define with the   tag, and must be mandatory to specify a unique ID value for this DIV element. For example:  
Here, it will be used to display graphical report

Note: This DIV container The content is replaced by the JSCharts image.
 Shows under the JSCharts image, we need to write a small amount of code to display a linear map. First, you have to prepare the data needed for images, we can use the JavaScript array to provide data, each element in the array is composed of 2 elements  
Var mydata = new array ([Products 1 “, 20], [Products 2”, 10], [Products 3, 30], [Products 4, 10], [Product 5 “,5]); var myChart = new JSChart ( ‘chartcontainer’, ‘line’); myChart.setDataArray (myData); myChart.draw ();

5. Use detailed description
   Here, the graphical report   // supports the JS 2D array, JSON format, xml format data source var myData = new Array ([ "product 1", 20], [ "goods 2", 10], [ "goods 3", 30], [ "merchandise 4", 10], [ "commodity 5 ", 5]); // The second parameter value is: line, bar, and PIE indicates a line diagram, histogram, pie chart to display report var mychart = new jschart ('ChartContainer', 'line'); / / Data Source Processing Method 1: SetDataArray (MyData) Using JS Arrse //myChart.SetDataArray (MyData); // Data Source Processing Method 2: SetDataJson Using JSON Format Data //myChart.SetDataJson ("Data.json "); / / Data Source Processing Method 3: SetDataXML Using XML Format Data MyChart.SetDataXML ("DATA.XML"); MyChart.SetTitle ('Test Report'); MyChart.Draw (); 
Statistical designation The time period is used to the purchase amount of each supplier. SelectSupplier.jspaction: @resource private accountRecordsService accountRecordsService; @RequestMapping ( “/ selectSupplier”) @ResponseBody public Object selectSupplier (String start, String end) {System.out.println ( “start:” + start + “|| end:” + end); Map

paramMap = new HashMap

(); paramMap.put ( “start”, start); paramMap.put ( “end”, end); return accountRecordsService.selectSupplier (paramMap);} public interface AccountRecordsService extends BaseService
{ List > selectSupplier (Map
 paramMap);} @ Service ( "accountRecordsService") public class AccountRecordsServiceImpl extends BaseServiceImpl  implements AccountRecordsService {@Override public List > selectSupplier (Map 
paramMap) { // Todo auto-generated method stub return accountRecordsmapper.selectsupplier (parammap);}} public interface AccountRecordsmapperExtends Basemapper
{list > SelectSupplier (map paramap);} # {start} and ar_date SELECT SUM (Ar_Payable) Total, Sup_name from Account_Records Inner Join Supplier on Account_Records.SUP_ID = Supplie <Map Summary <Map The above is the detailed explanation of the JSChart component introduced to you. I hope to help everyone. If you have any questions, please send me a message, the small package will reply to everyone in time! <Map
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment