項目上要用到Hightcharts展示平臺機器占用情況,使用這類第三方插件很方便就能實現

JSP:

<script?type="text/javascript"?src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script><div id="machineRate" title="按產品線統計機器占比" style="display:inline; width:50%;float: left"></div>
JS: /**查看機器占比(按產品線) fangguitang@dnion.com 2015/8*/ function loadMachineRate(){var chart;$(document).ready(function(){chart = new Highcharts.Chart({//常規圖表選項設置chart: {renderTo: 'machineRate', //在哪個區域呈現，對應HTML中的一個元素IDplotBackgroundColor: null, //繪圖區的背景顏色plotBorderWidth: null, //繪圖區邊框寬度plotShadow: false //繪圖區是否顯示陰影 },//圖表的主標題title: {text: '按產品線統計機器占比'},//當鼠標經過時的提示設置tooltip: {pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 1},//每種圖表類型屬性設置plotOptions: {//餅狀圖pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,color: '#000000',connectorColor: '#000000',formatter: function() {//Highcharts.numberFormat(this.percentage,2)格式化數字，保留2位精度return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';}}}},//圖表要展現的數據series: [{type: 'pie',name: '機器占比'}]});});$.ajax({type : "GET",url : "machine/getStaticMachineRateByProductLine",success : function(data){//定義一個數組browsers = [],//迭代，把異步獲取的數據放到數組中$.each(data,function(i,d){var str = "";switch (d.businessType) {case "BUSINESS_WEB":str = "網頁";break;case "BUSINESS_DOWNLOAD":str = "下載";break;case "BUSINESS_PLAY":str = "點播";break;case "BUSINESS_VIDEO":str = "視頻";break;case "BUSINESS_STREAMING":str="流媒體";break;case undefined:str="其他";break;default:break;}browsers.push([str,d.machineCount]);});//設置數據chart.series[0].setData(browsers); },error : function(e){/*alert(e);*/}}); }
Controller: /*** 根據產品線統計機器的占比(餅圖)*/ @RequestMapping("/getStaticMachineRateByProductLine") @ResponseBody public List<Map<String, Integer>> getStaticMachineRateByProductLine(){List<Map<String, Integer>> machines = platformMachineService.getStaticMachineRateByProductLine();return machines; }
Service: /** 根據產品線統計機器占比(餅圖)*/ @Override public List<Map<String, Integer>> getStaticMachineRateByProductLine() {return this.platformMachineMapper.getStaticMachineRateByProductLine(); }
Mapper: /** 根據產品線統計機器占比*/ public List<Map<String, Integer>> getStaticMachineRateByProductLine();
XML: <!-- 根據產品線查看機器占比 --> <select id="getStaticMachineRateByProductLine" resultType="Map">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.current_platformGROUP BY pi.pl_business_type ORDER BY machineCount DESC </select>

總結

以上是生活随笔為你收集整理的Highcharts+Spring饼图使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。