项目中的一个功能,用图表显示终端的监控数据,简单研究了一下highcharts的用法,用的比较简单,分享一下基本用法。
1.后台去取数据库的数据:
@RequestMapping("/showchart")
public String showChart(Long locNo, Model model, HttpServletRequest request) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date nowtime=new Date();
String startDate=request.getParameter("startDate");//获取输入的日期
//判断日期输入是否为空,若为空按当前日期查询
if(StringUtils.isEmpty(startDate)){
startDate=sdf.format(nowtime);
}
//查询数据
List<LocMonitorDetail> list = monitorUpDataService.queryLocMonitorDetailByWhCond(locNo,startDate);
int i = 1;
StringBuffer time=new StringBuffer();
StringBuffer cpuValue=new StringBuffer();
StringBuffer memoryValue=new StringBuffer();
//格式化数据,格式为[time1,time2,....],[value1,value2,....]
time.append("[");
cpuValue.append("[");
memoryValue.append("[");
for (LocMonitorDetail locM : list) {
time.append("'").append(DateUtil.getDateFormat(locM.getCreateTime())).append("'");
cpuValue.append(locM.getCpu());
memoryValue.append(locM.getMemory());
//若为最后一个则不加逗号
if(i<list.size()){
time.append(",");
cpuValue.append(",");
memoryValue.append(",");
}
}
time.append("]");
cpuValue.append("]");
memoryValue.append("]");
//判断list里是否有数据,若为空把当前的locno放入list,以供下次查询使用
if(list.size()==0){
LocMonitorDetail locMonitorDetail=new LocMonitorDetail();
locMonitorDetail.setLocNo(locNo);
list.add(locMonitorDetail);
}
model.addAttribute("timeArray", time);
model.addAttribute("cpuValueArray", cpuValue);
model.addAttribute("memoryValueArray", memoryValue);
model.addAttribute("locno", list);
return JSP_PATH + "showchart";
}
注意生成的数据格式。
2.前台页面:
<table style="padding-left:5px;" width="100%" border="0" cellspacing="0" cellpadding="0">
<div id="container" style="min-width:800px;height:400px"></div> //生成的图表放在这里
<br><br>
<div id="container2" style="min-width:800px;height:400px"></div> <span style="font-family: Arial, Helvetica, sans-serif;">//生成的图表放在这里</span>
</table>
<!-- 生成CPU占用率图表 -->
<script>
$(function () {
var time=${timeArray}; //接收后台传来的数据
var value=${cpuValueArray}; //接收后台传来的数据
$('#container').highcharts({ //图表展示容器,与div的id保持一致
chart: {
type: 'line' //图表的类型默认的就是折线型(line),这里可以选择显示的类型
},
title: {
text: '<spring:message code="monitorUpData.showChart.CPURate"/>' //指定图表标题
},
xAxis: {
categories:time //X轴,time为后台传过来的数据,日期格式为:[time1,time2,....]
},
yAxis: { //Y轴
title: {
text: 'value'
},
labels: {
formatter: function () {
return this.value;
}
},
lineWidth: 2
},
series:[{ //这里是数据
name:'cpu', //数据的名称,随意起名
data:value //后台传过来的值,以此生成表中的每个数据,与X轴一一对应,格式:[value1,value2,....]
}]
});
});
</script>
<!-- 生成内存大小图表 -->
<script>
$(function () {
var time=${timeArray};
var value=${memoryValueArray};
$('#container2').highcharts({ //图表展示容器,与div的id保持一致
chart: {
type: 'line'
},
title: {
text: '<spring:message code="monitorUpData.showChart.memoryRate"/>' //指定图表标题
},
xAxis: {
categories:time
},
yAxis: {
title: {
text: 'value'
},
labels: {
formatter: function () {
return this.value+'M';
}
},
lineWidth: 2
},
series:[{
name:'<spring:message code="monitorUpData.showChart.Memory"/>',
color:"#90ed7d",
data:value
}]
});
});
</script>
3.生成的图表展示: