Spring MVC 使用highcharts创建图表

项目中的一个功能，用图表显示终端的监控数据，简单研究了一下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.生成的图表展示：