SpringMVC+highstock实现曲线报表

最近项目要做曲线报表，之前用的是生成图片然后传到前端，感觉不是很好，在网上找到资料说highstock就可以而且还可以做类似股票的那种实时的曲线，研究的一段时间把项目问题解决了做个总结：

首先把highstock.js放到项目资源路径下，因为这个需要JQuery，所以jquery-1.7.2.min.js也需要放，而且在页面引用是要先引用jquery-1.7.2.min.js再引用highstock.js，刚开始做的时候没注意页面加载完后不出图。我做的这个图还需要exporting.js，所以也要放进项目资源文件夹中

  

页面代码：

<script type="text/javascript"	src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript"	src="${pageContext.request.contextPath}/js/highstock.js"></script>
	<script type="text/javascript"	src="${pageContext.request.contextPath}/js/exporting.js"></script>
		<script >
		$(document).ready(function(){
		$("#sub").click(function(){
			var names = [];
			$("input:checked[name=sms]").each(function(i, e) {
				var ks = $(this).val();
					if(ks == 1) {
					names.push(1, 2);
					}
					else if (ks == 2){
					names.push(3, 4, 5, 6, 7, 8);
					}
					else if (ks == 3){
					names.push(9, 10, 11, 12, 13);
					}
					else if (ks == 4){
					names.push(14, 15, 16, 17, 18, 19, 20);
					}
					else if (ks == 5){
					names.push(21, 22, 23, 24, 25, 26, 27);
					}
					else if (ks == 6){
					names.push(28, 29, 30, 31, 32, 33, 34, 35);
					}
					else if (ks == 7){
					names.push(36, 37, 38, 39, 40, 41);
					}
			});
			var seriesOptions = [],
    		yAxisOptions = [],
    		seriesCounter = 0,
    		colors = Highcharts.getOptions().colors;
			$.each(names, function(i, name) {
				//后台读取json数据
		        $.getJSON("<%=request.getContextPath()%>/JSONByAction?name="+name+"toh="+2, function(data) {
		            //将json数据放入seriesOptions数组
		            seriesOptions[i] = {
		                    name: name,
		                    data: data
		                };
		            seriesCounter++;
		            if (seriesCounter == names.length) {
		                 //开始绘图
		                createChart();
		            }
				});
				function createChart() {
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                selected : 4
            },
            title : {
                text : '湿度显示'
            },
            credits : {
            enabled : false//去掉右下角的标志
        	},
        	 rangeSelector: {
                        // 缩放选择按钮，是一个数组。
                        // 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                        // 其中count是指多少个单位type。
                        // 其中text是配置显示在按钮上的文字
                        buttons: [{
                                type: 'month',
                                count: 1,
                                text: '1月'
                            }, {
                                type: 'month',
                                count: 3,
                                text: '3月'
                            }, {
                                type: 'month',
                                count: 6,
                                text: '6月'
                            }, {
                                type: 'year',
                                count: 1,
                                text: '1年'
                            },{
                                type: 'year',
                                count: 3,
                                text: '3年'
                            }, {
                                type: 'all',
                                text: '所有'
                            }],
                        // 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
                        selected: 1,
                        // 是否允许input标签选框
                        inputEnabled: false
                    },
            //右上角日期区间格式化
            rangeSelector:{
                selected:1,
                inputDateFormat:'%Y-%m-%d'
            },
            xAxis: {
                type: 'datetime',
                //x轴时间的格式化
                dateTimeLabelFormats: {
                    second: '%Y-%m-%d<br/>%H:%M:%S',
                    minute: '%Y-%m-%d<br/>%H:%M',
                    hour: '%Y-%m-%d<br/>%H:%M',
                    day: '%Y<br/>%m-%d',
                    week: '%Y<br/>%m-%d',
                    month: '%Y-%m',
                    year: '%Y'
                }
            },
            yAxis : {
                title : {
                    text : '湿度'
                },
                labels: {
		    		formatter: function() {
		    			return (this.value > 0 ? '+' : '') + this.value + '%';
		    		}
		    	}
            },
            //弹出框的格式化显示
            tooltip: {
                xDateFormat: '%Y-%m-%d %A',
                pointFormat: '<span style="color:{series.color}">{point.name}</span>: <b>{point.y}</b><br/>',
                    valueDecimals:2
            },
            series :seriesOptions
        });
    }   
			});
		});
	});
</script>
<div id="container" style="height: 500px; min-width: 600px"></div>

后台其实就简单了，

 

 

@SuppressWarnings("rawtypes")
	@RequestMapping("/queHumHistory")
	@ResponseBody
	public Map kan(HttpServletRequest request,HttpServletResponse response){
int id = Integer.parseInt(request.getParameter("region"));
		List<TempHumHistory> historyList = historyImpl.queHistoryById(id);
		 Map<String, Object> modelMap = new HashMap<String, Object>(3);  
		   modelMap.put("total", "1");  
		   modelMap.put("data", historyList);  
		   modelMap.put("success", "true");  
		   return modelMap; 

	}

要引入的包：