Highcharts+spring Pie chart Usage examples

On the project to use the Hightcharts display platform machine occupancy, the use of such third-party plug-in is very convenient to achieve

Jsp:

< span class= "tag" style= "Color:rgb (0,0,136)" > < Script type =  "Text/javascript"      src=  "<%=    Basepath%> /resources/thirdparty/ Highcharts/highcharts.js "       ></ script ;  <div ID="Machinerate"  title="Counting machine ratios by product line" style="Display:inline;width: -%;float: Left"></div>

Js:

/** View machine ratio (by product line) [email protected] 2015/8*/function loadmachinerate () {var chart;$ (document). Ready (function () { Chart = new Highcharts.chart ({//General Chart Options settings chart: {renderto: ' machinerate ',//in which region, corresponding HT                An element ID in ml plotbackgroundcolor:null,//plot area background color plotborderwidth:null,//plot area border width                Plotshadow:false//Plot area display Shadow},//main title of chart title: {  Text: ' Statistics machine by product line '},//When the mouse passes the prompt to set the tooltip: {pointformat: ' {series.name}: <b>{point.percentage}%</b> ', percentagedecimals:1},//each                    Chart Type property settings plotoptions: {//Pie chart pies: {allowpointselect:true,                        Cursor: ' pointer ', DataLabels: {enabled:true,       Color: ' #000000 ',                 Connectorcolor: ' #000000 ', formatter:function () {//hi Ghcharts.numberformat (this.percentage,2) format numbers, leave 2-bit precision return ' <b> ' + this.point.name + ' <                        /b&gt: ' +highcharts.numberformat (this.percentage,2) + '% '; }}},//data series to be presented by the chart: [{type: ' pi E ', Name: ' Machine ratio '}]});  $.ajax ({type: "GET", url: "Machine/getstaticmachineratebyproductline", success:function (data) {///define an array browsers =        [],//iteration, put the asynchronously obtained data into the array $.each (Data,function (i,d) {var str = ""; Switch (d.businesstype) {case "business_web": str = "webpage"; break;case "business_download": str = "Download"; break;case "Business_ PLAY ": str =" On demand "; Break;case" Business_video ": str =" video "; Break;case" business_streaming ": str=" streaming media "; break;case     Undefined:str= "other"; break;default:break;}       Browsers.push ([Str,d.machinecount]);        });  Set data Chart.series[0].setdata (browsers); },error:function (e) {/*alert (e); *}});

Controller:

/** * The proportion of machines (pie chart) */@RequestMapping ("/getstaticmachineratebyproductline") according to the product line @ResponseBodypublic list<map< String, integer>> getstaticmachineratebyproductline () {list<map<string, integer>> machines =  Platformmachineservice.getstaticmachineratebyproductline (); return machines;}

Service:

/** Statistics machine ratio (pie chart) */@Overridepublic list<map<string, integer>> getstaticmachineratebyproductline () { return This.platformMachineMapper.getStaticMachineRateByProductLine ();}

Mapper:

/** according to the product line statistics machine accounted for */public list<map<string, integer>> getstaticmachineratebyproductline ();

Xml:

<!--view machine ratio--><select id= "Getstaticmachineratebyproductline" resulttype= "Map" >select pi.pl_ by product line Business_type as Businesstype,count (mc_id) as Machinecountfrom platform_machine pmleft JOIN platform_info pi on Pi.pl_nam E_en = Pm.current_platformgroup by Pi.pl_business_type ORDER by Machinecount desc</select>

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Highcharts+spring Pie chart Usage examples