Generate a pie chart based on Highcharts+easui+java

Preface: First Contact pie chart, just start no idea, back in the net to find a bit of comparison, found that using Highcharts plug-in to generate a chart is particularly simple, use up or very simple, only need to return to the background of the corresponding data reception with JSON, you can perfect the implementation.

First, a physical display, let us see the effect

(The effect is still Meimei)

Second, to achieve this effect first go to the Highcharts official website to download the chart you need

The simple introduction of the Highcharts,highcharts is a very popular, beautiful interface of the pure JavaScript Chart library. It mainly consists of two parts: Highcharts and Highstock. Highcharts can provide intuitive, interactive charts for your website or Web application. Currently supports lines, splines, area, areaspline, column charts, bar charts, pie charts and scatter chart types. Highstock can easily create stock or general timeline charts for you. It includes advanced navigation options, preset date ranges, date selectors, scrolling and pan, and more. (Below is Highcharts website address and demo)

Highcharts Official website: http://www.highcharts.com/

Highcharts demo:http://www.highcharts.com/demo/

2.1 Introduce the corresponding JS file to achieve the page effect

Because I am in the Web development Framework, the main use of the Mvc+easyui way, because the file contains the following is shown. (each chart needs to be included in the demo of the document website)

<script type= "Text/javascript" src= "<%=basepath%>/view/report/highcharts.js" ></script>< Script type= "Text/javascript" src= "<%=basepath%>/js/grid.js" ></script><script type= "text/ JavaScript "src=" <%=basepath%>/view/report/exporting.js "></script> <script type=" text/ JavaScript "src="/view/report/jquery.min.js "></script>

<script type= "Text/javascript" src= "<%=basepath%>/view/report/jquery.min.js" ></script>
@* Chart js file application *@
<script type= "Text/javascript" src= "<%=basepath%>/view/report/highcharts.js" ></script>< Script type= "Text/javascript" src= "<%=basepath%>/js/grid.js" ></script><script type= "text/ JavaScript "src=" <%=basepath%>/view/report/exporting.js "></script>

Third, the chart JS code First is the official website download down the chart code

$ (function () {$ (' #container '). Highcharts ({chart: {plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false}, Title: {text:' 2014 per browser on a website}, tooltip: {headerformat:' {series.name}<br> ', Pointformat:' {point.name}: <b>{point.percentage:.1f}%</b> '}, Plotoptions: {pie: {allowpointselect:true, cursor:' Pointer ', DataLabels: {enabled:false}, Showinlegend:true}}, Series: [{type:' Pie ', Name:' Browser traffic ratio ', data: [[' Firefox ', 45.0],                [' IE ', 26.8], {name:' Chrome ', y:12.8, sliced:true, selected:true                },                [' Safari ', 8.5],                [' Opera ', 6.2],                [' Other ', 0.7]            ]        }]    });});

Modified style, only need to change the data into a dynamic array with JSON to receive

var chart2= highcharts.chart (' Container1 ', {chart: {margin: [0, 0, 0, 0], Width:300, padding:[0, 0, 0, 0], Plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false}, Title: {text:' Number of unusual baggage at each terminal '            },           /*tooltip: {headerformat: ' {series.name}<br> ', Pointformat: ' {point.name}: <B&G T {point.percentage:.1f}%</b> '},*/plotoptions: {pie: {allowpointselect:true, cursor:' Pointer ', DataLabels: {enabled:true, Format:' <b>{point.name}</b> ', Style: {color: (highcharts.theme&& Highcharts.theme.contrastTextColor) | | ' Black '}}}, Series: [{Typ E:' Pie ', Name:' Unusual baggage allowance ', data: []}]}); 

My Ajax Request

function Getpiejson () {var data1= []; $.ajax ({type:"POST",//How to submitUrl:servicefulpath + '/irregularbagreporttotal/piechart ', success:function (result) {var json=Result.data;  for(Var key in JSON) {//by iterating through the properties of the object, traversing the key-value pair, obtaining the key, and then obtaining the corresponding value through the object [key]                       if(Json.hasownproperty (key)) {Data1.push ([key, Json[key]]); }} chart2.series[0].setdata (DATA1);      }          }); }      

Four, background code format

(Note: Each background frame and conditions are different, the most important thing is to return a map data to the foreground can be)

    //Pie chart     PublicMap<string, object>Piechart () {Map<string, object> map =NewHashmap<string, object>(); StringBuffer SQL=NewStringBuffer ("Select SUM (E. Lose) as Lose,sum (E. Misshipment) as Miss, "); Sql.append (The SUM (E. Leakage_luck) as Leak,sum (E. Less) as Less,sum (E. Damaged) as damaged "); Sql.append ("From E_abnom_bagga_tran E"); Query Query= Entitymanager.createnativequery (sql.tostring ());//Execute SQL statementobject[] o = (object[]) query.getresultlist (). Get (0); Irregularbagreport Count=NewIrregularbagreport (); //lost        if(O[0] = =NULL) {count.setlost (Bigdecimal.zero); } Else{count.setlost (BigDecimal) o[0]); }        //Wrong Shipment        if(O[1] = =NULL) {count.setmisshipment (Bigdecimal.zero); } Else{count.setmisshipment (BigDecimal) o[1]); }        //missed shipment        if(O[2] = =NULL) {Count.setleakageluck (Bigdecimal.zero); } Else{count.setleakageluck (BigDecimal) o[2]); }        //less charge        if(O[3] = =NULL) {count.setless (Bigdecimal.zero); } Else{count.setless (BigDecimal) o[3]); }        //breakage        if(O[4] = =NULL) {count.setdamaged (Bigdecimal.zero); } Else{count.setdamaged (BigDecimal) o[4]); } map.put (Lost, Count.getlost ()); Map.put ("Bad luck", Count.getmisshipment ()); Map.put ("Missed Shipment", Count.getleakageluck ()); Map.put ("Close to the small", Count.getless ()); Map.put (Damaged, count.getdamaged ()); returnmap; }

To sum up, follow the above steps to generate pie chart, welcome to the big boys comment comments.

Generate a pie chart based on Highcharts+easui+java