zoukankan      html  css  js  c++  java
  • 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- 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; 
    
    	}

    要引入的包:

  • 相关阅读:
    [转]JavaScript和html5 canvas生成圆形印章
    [转]微信小程序开发:http请求
    [转]Clean up after Visual Studio
    [转]How to Clean the Global Assembly Cache
    [转].NET Core dotnet 命令大全
    [转].NET 4.5+项目迁移.NET Core的问题记录 HTTP Error 502.5
    [转]How do I run msbuild from the command line using Windows SDK 7.1?
    [转]glyphicons-halflings-regular字体 图标
    [转]程序集之GAC---Global Assembly Cache
    [转]How can I install the VS2017 version of msbuild on a build server without installing the IDE?
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3172254.html
Copyright © 2011-2022 走看看