项目上要用到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中的一个元素ID
plotBackgroundColor: 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 machineCount
FROM platform_machine pm
LEFT JOIN platform_info pi ON pi.pl_name_en = pm.current_platform
GROUP BY pi.pl_business_type
ORDER BY machineCount DESC
</select>