项目上要用到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);*/}});
}/*** 根据产品线统计机器的占比(饼图)*/
@RequestMapping("/getStaticMachineRateByProductLine")
@ResponseBody
public List<Map<String, Integer>> getStaticMachineRateByProductLine(){List<Map<String, Integer>> machines = platformMachineService.getStaticMachineRateByProductLine();return machines;
}/** 根据产品线统计机器占比(饼图)*/
@Override
public List<Map<String, Integer>> getStaticMachineRateByProductLine() {return this.platformMachineMapper.getStaticMachineRateByProductLine();
}/** 根据产品线统计机器占比*/
public List<Map<String, Integer>> getStaticMachineRateByProductLine();<!-- 根据产品线查看机器占比 -->
<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>
