Ichars Making data charts

Data chart basically every site in the background to do, not only to do also need to be very detailed in order to complete the specific understanding of the site data. Before the use of Jfreechart no ichartjs with convenience, nor ichartjs effect dazzle, so decisive qiantouming study a bit ichartjs. Below is the implementation of a simple bar chart.

Project framework: Spring+springmvc+mybatis, operating Environment: MyEclipse8.6.

Reference: Fastjson-1.2.5.jar Bag

Page reference JS file on official website: ichart.1.2.min.js

Ichars is a very convenient tool for making charts, in the display layer only need to reference a JS file, in writing a piece of JavaScript code can be displayed on the page image, of course, he is the background to the page data is required, must be JSON format data, So we also need to convert the list collection data from the database to JSON data and then upload to the page. This requires a reference: Fastjson-1.2.5.jar package.

First step: In the page reference Ichart.1.2.min.js file, the JavaScript code showing the page is as follows:

<script type= "Text/javascript" >$ (function () {$.ajax ({type: "post", url: "<%=request.getcont             Extpath ()%>/data/queryfl_data ", DataType:" JSON ", success:function (data) {var data = data; New Ichart.bar2d ({render: ' Canvasdivs ',//display graphics in div with page ID canvasdivs Backgrou Nd_color: ' #3c4251 ',///Background color grid_color: ' #882288 ',//Histogram color data:data,//ti                Tle: ' Project type statistics ', title: {text: ' Project classification data histogram ', color: ' #b5bcc5 '                }, Subtitle: ', footnote: ' Data source: Green crowdfunding ', width:1060,                    height:400, coordinate: {width:640, height:260,                        Axis: {width: [0, 0, 1, 1]}, scale: [{ PositIon: ' Bottom ', start_scale:0, End_scale:10, scal                    E_space:1}]}, Animation:true, sub_option: {                        Listeners: {parsetext:function (R, t) {return t;                }}}, Legend: {Enable:false    }). Draw (); }    });}); </script>

The data is the JSON data coming from the background, the code is as follows:

This is the method of Ajax access within the Controller        //Background statistics               //using AJAX to return data         @RequestMapping ("/queryfl_data")         @ Responsebody public        String Queryfl_data () throws exception{        string Data=fenleiservice.queryfl_data ();            return data;        }

Code in the implementation layer of the service:

Background query data public    String Queryfl_data () throws exception{        //TODO auto-generated method stub        List<fenlei > Fllist=fenleidaoimp.queryfl_data ();                list<projectjson> fltypejsons = new arraylist<projectjson> ();        for (Fenlei fl:fllist) {            Long Count = (Long) fl.getflid (). Longvalue ();            Fltypejsons.add (New Projectjson (Fl.getflname (), Count,collorhelper.getcolorcode ()));        String Jsontext = json.tojsonstring (fltypejsons);        return jsontext;            }

　　

Here you need to specifically explain fenlei this entity class has two attribute integer flId and string flname when looking up data from the database flId is not the ID number of the classification, but the classification of the Count (flId), which means that the flId Is the number of items that have been recorded for this category.

Collorhelper is the help class of a color that he defines, and he can assign different colors to each of the different bar charts. The code is as follows:

Package Com.zzzy.qingju.interceptor;import Java.awt.color;public class Collorhelper {public        static String Getcolorcode () {        color color = new Color (                (new double (Math.random () *)). Intvalue () + +,                (new double (Mat H.random ()). Intvalue () + +,                (New Double (Math.random () *)). Intvalue () + +);        String R = integer.tohexstring (color.getred ());        R = R.length () < 2? (' 0 ' + R): r;        String B = integer.tohexstring (Color.getblue ());        B = B.length () < 2? (' 0 ' + b): b;        String G = integer.tohexstring (Color.getgreen ());        G = G.length () < 2? (' 0 ' + g): g;        Return "#" + R + B + G;    }    }

　　

Because of the characteristics of the classification of the entity Class I here, in the right way should be defined as a Projectjson entity class, the name of the entity class can be arbitrarily taken, the class properties are generally based on the statistical chart to be produced, some charts need three kinds of data, some need four kinds of data, And this entity class is based on the data of the chart, I do a histogram chart, he needs three kinds of data, 1-quantity, 2-First name, 3-color,

So according to this feature I define the Projectjson as follows:

public class Projectjson implements Serializable {    /**
     * Data entity class     * Projectjson * */    private static final long serialversionuid = 7877814195365848373L;    private String name;    private Long value;    private String color;

  ... Omit get and Set methods

　　

The above can be used to convert the data statistics of each classification into JSON data sent to the page to display.

Ichars Making data charts