Highcharts + Spring pie chart use instance

Highcharts + Spring pie chart use instance

 

In this project, Hightcharts is used to display the machine usage of the platform. This type of third-party plug-in can be easily implemented.

JSP:

<script type=
  
    src=
   <%=basePath%>
   /resources/thirdparty/highcharts/highcharts.js></script>
  

 
JS:

/** View machine proportions (by product line) fangguitang@dnion.com 2015/8 */function loadMachineRate () {var chart; $ (document ). ready (function () {chart = new Highcharts. chart ({// set chart options for regular charts: {renderTo: 'machinerate', // in which area the Chart is displayed, corresponding to an element ID in HTML: plotBackgroundColor: null, // The background color of the drawing area: plotBorderWidth: null, // The Border width of the drawing area: plotShadow: false // whether to display the shadow in the drawing area}, // The title of the chart title: {text: 'machine proportions by product line '}, // set tooltip: {pointFormat:' {series. name }:{Point. percentage} %', PercentageDecimals: 1}, // set plotOptions: {// pie chart pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {enabled: true, color: '#000000', connectorColor: '#000000', formatter: function () {// Highcharts. numberFormat (this. percentage, 2) format the number and retain 2-bit return Accuracy''+ This. point. name +': '+ Highcharts. numberFormat (this. percentage, 2) + '%' ;}}}, // data series: [{type: 'pie ', name: 'machine proportion '}]}) ;}; $. ajax ({type: GET, url: machine/getStaticMachineRateByProductLine, success: function (data) {// defines an array browsers = [], // iteration, put the data obtained asynchronously 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 = VOD; break; case BUSINESS_VIDEO: str = video; break; case BUSINESS_STREAMING: str = streaming media; break; case undefined: str = others; break; default: break;} browsers. push ([str, d. machineCount]) ;}); // sets the data chart. series [0]. setData (browsers) ;}, error: function (e) {/* alert (e );*/}});}

Controller:

/*** Calculate the machine proportion (pie chart) based on the product line */@ RequestMapping (/getStaticMachineRateByProductLine) @ ResponseBodypublic List
 
  
> GetStaticMachineRateByProductLine () {List
  
   
> Machines = platformMachineService. getStaticMachineRateByProductLine (); return machines ;}
  
 

Service:

/** Calculate the machine proportion (pie chart) based on the product line */@ Overridepublic List
 
  
> GetStaticMachineRateByProductLine () {return this. platformMachineMapper. getStaticMachineRateByProductLine ();}
 

Mapper:

/** Calculate the machine shares by product line */public List
 
  
> GetStaticMachineRateByProductLine ();
 

XML:

 SELECT pi. pl_business_type AS businessType, COUNT (mc_id) AS machineCountFROM platform_machine pmLEFT JOIN platform_info pi ON pi. pl_name_en = pm. sort BY pi. pl_business_type order by machineCount DESC