highcharts画线性图示例

最新推荐文章于 2023-11-18 16:46:44 发布

原创最新推荐文章于 2023-11-18 16:46:44 发布 · 877 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts #line #springmvc #ajax

highcharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Highcharts库创建用户注册曲线图，包括图表配置、后端数据处理及JSON格式数据交互等关键步骤。

1、highcharts的基本属性

var chartTitle = '用户注册曲线图';
var lineChartData_hg = {
	chart: {    //图表总体的设置
	    type: 'line',    
            renderTo:domId,
            zoomType:'x' //控制图表是否可以拉伸
        },
	title: {    //图表标题
	    text: chartTitle //标题名称
	},
	xAxis:{
	    type:'datetime',
	    //tickInterval:timeFlag,
	    dateTimeLabelFormats:{
		second:'%H:%M',
		minute:'%H:%M',
		hour:'%H:%M',
		day:'%m/%d',
		week:'%m/%d',
		month:'%Y-%m',
		year:'%Y'
	    }, minRange:function () {
		return '1000 * 60 * 10 * 10';
	    }
	},
	yAxis: {    //Y轴
	    min:0,
	    title: {
		text: '个数(个)'    //y轴标题
	    }
	},
	tooltip:{
	    shared:true,
	    crosshairs:true,
	    formatter:function () {
		var info ;
		if('DAY'==viewType){
	            info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月%e日 ", this.x) + "</b>";
		}else if('WEEK'==viewType){
		    var year = new Date(this.x).getFullYear();
		    var d = new Date(this.x);
		    var week = userRegist_hg.getYearWeek(d);
		    info = "<b>" +year+'年'+ week+'周' + "</b>";
		}else if('MONTH'==viewType){
		   info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月 ", this.x) + "</b>";
		}else if('SEASON'==viewType){
		    var year = new Date(this.x).getFullYear();
		    var month = new Date(this.x).getMonth()+1;
		    var m = 0;
		    if(month==1||month==2||month==3){
			  m = 1;
		    }else if(month==4||month==5||month==6){
			  m=2;
		    }else if(month==7||month==8||month==9){
			  m=3;
		    }else if(month==10||month==11||month==12){
			  m = 4 ;
		    }
		    info = "<b>" + year+'年' +m+'季'+ "</b>";
		}else if('YEAR'==viewType){
		    info = "<b>" + Highcharts.dateFormat("时间:%Y年 ", this.x) + "</b>";
		}
		$.each(this.points, function (i, point) {
		    info += "<br/>" + point.series.name + ":" + point.y+"(个)";
		});
		return info;
		}
	    },
	    legend:{
            },
	    plotOptions: {                  //图表标示的各种选项
		spline: {                     //这里由于是折线图，那么就是折线图的选项
		    dataLabels: {           //数据标签
			 enabled: true       //允许显示数据，默认为false，不显示具体数据
		    },
		enableMouseTracking: false  //这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默认为true
	    },
	    line: {                     //这里由于是折线图，那么就是折线图的选项
		dataLabels: {           //数据标签
		    enabled: true       //允许显示数据，默认为false，不显示具体数据
		},
		enableMouseTracking: false  //这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默认为true
	    }
	},
	series: []
}
lineChartData_hg.series = data.list;
userRegistLines_hg = new Highcharts.Chart(lineChartData_hg);

2、后台数据封装：

相对于idea的rails语言来说，eclipse采用java的语言来封装想对要麻烦一些，但是只要知道返回的json的数组是什么样的，就可以封装成类似的json过来

@RequestMapping(value = "/userLoginLineChart", method = RequestMethod.POST)
@ResponseBody
public Object userLoginLineChart(String viewType,HttpServletRequest request,
			HttpSession httpSession, Model model) throws Exception {
	String errorInfo = "ok";
	Map<String,Object> jsonMap = new HashMap<String,Object>();
	List<Object> list = new ArrayList<Object>(); // 传递过来的list直接赋给series，series是一个数组
	Map<String ,Object> line = new HashMap<String, Object>();//line指代第一条线
	List<Object> data = new ArrayList<Object>();//data用来存数据点
	line.put("name", "登录");
	line.put("color", "#4572A7");
        line.put("yAxis", 0);
	line.put("visible", true);
	Map<String, Object> marker = new HashMap<String, Object>();
	marker.put("enabled", false);
	line.put("marker", marker);
	ResultDto resultDto = userMonitorService.drawUserLoginLineChart(viewType,httpSession);
	//errorInfo 用来处理错误信息，如果是error，直接提示错误，如果是logout，重新进入登录界面
        errorInfo = ResultUtil.VerifyResultEntity4Json(httpSession, resultDto);
	if(!"ok".equals(errorInfo)){
		jsonMap.put("errorInfo", errorInfo);
		return jsonMap;
	}
	if (resultDto.getEntity() != null) {
	     UserRegistLineList lineList = (UserRegistLineList) resultDto.getEntity();
	     if(null!=lineList&&0<lineList.getList().size()){
		for(int i=0;i<lineList.getList().size();i++){
		    Object[] d = new Object[2];
		    UserRegistLine l = lineList.getList().get(i);
		    d[0] = l.getMincreateTime();
		    d[1]=l.getCount();
		    data.add(d);
		}
	     }
	}
	jsonMap.put("errorInfo", errorInfo);
	line.put("data", data);
	list.add(line);
	jsonMap.put("list",list);
	return jsonMap;
}

3、页面jsp处理片段：

 <div id="drawUserRegistLineData" >
       loading...              	
 </div>

<script type="text/javascript">
$(function(){
 // 初始化div的宽度，不然第一次进入页面的时候，宽度和后面加载的宽度不一致
     $('#drawUserRegistLineData').css('width', (window.screen.availWidth - 175)*0.9);
// 进入页面的时候，调用方法         userRegist_hg.drawUserRegistLine($("#drawLineChart4Time").val(),'drawUserRegistLineData');
});
     
</script>

4、ajax调用后台的数据，并对数据解析成线性图（错误处理）

userRegist_hg.drawUserRegistLine = function(viewType,domId){
	$.ajax({  
        url: serverContext + "/userMonitor/userRegistLineChart",
        async : true,
        type:'post',  
        data: {"viewType":viewType},  
        dataType:'json',  
        success:function(data){  
        	var err = data.errorInfo;
			// 错误处理
			if (err && err != "ok") {
				if (err == "logout") {
					handleSessionTimeOut();
					return;
				} else {
					jAlert(err);
				}
			} else {
				//画图
				var chartTitle = '用户注册曲线图';
			    lineChartData_hg = {
			    		chart: {    //图表总体的设置
			                type: 'line',   
			                renderTo:domId,
			                zoomType:'x'
			            },
			            title: {    //图表标题
			                text: chartTitle //标题名称
			            },
			            xAxis:{
				            type:'datetime',
				            //tickInterval:timeFlag,
				            dateTimeLabelFormats:{
		                    	second:'%H:%M',
		                    	minute:'%H:%M',
		                    	hour:'%H:%M',
		                    	day:'%m/%d',
		                    	week:'%m/%d',
		                    	month:'%Y-%m',
		                    	year:'%Y'
			                }, minRange:function () {
			                    return '1000 * 60 * 10 * 10';
			                }
				        },
			            yAxis: {    //Y轴
			            	min:0,
			                title: {
			                    text: '个数(个)'    //y轴标题
			                }
			            },
			            tooltip:{
			                shared:true,
			                crosshairs:true,
			                formatter:function () {
			                	var info ;
			                	if('DAY'==viewType){
			                		info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月%e日 ", this.x) + "</b>";
			                	}else if('WEEK'==viewType){
			                		var year = new Date(this.x).getFullYear();
			                		var d = new Date(this.x);
			                		var week = userRegist_hg.getYearWeek(d);
			                		info = "<b>" +year+'年'+ week+'周' + "</b>";
			                }else if('MONTH'==viewType){
			                		info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月 ", this.x) + "</b>";
			                	}else if('SEASON'==viewType){
			                		var year = new Date(this.x).getFullYear();
			                		var month = new Date(this.x).getMonth()+1;
			                		var m = 0;
			                		if(month==1||month==2||month==3){
			                			m = 1;
			                		}else if(month==4||month==5||month==6){
			                			m=2;
			                		}else if(month==7||month==8||month==9){
			                			m=3;
			                		}else if(month==10||month==11||month==12){
			                			m = 4 ;
			                		}
			                		info = "<b>" + year+'年' +m+'季'+ "</b>";
			                	}else if('YEAR'==viewType){
			                		info = "<b>" + Highcharts.dateFormat("时间:%Y年 ", this.x) + "</b>";
			                	}
			                    $.each(this.points, function (i, point) {
			                        info += "<br/>" + point.series.name + ":" + point.y+"(个)";
			                    });
			                    return info;
			                }
			            },
			            legend:{
			            	
			            },
			            plotOptions: {                  //图表标示的各种选项
			                spline: {                     
			                    dataLabels: {           //数据标签
			                        enabled: true       
			                    },
			                    enableMouseTracking: false  
			                },
			                line: {                  
			                    dataLabels: {           //数据标签
			                        enabled: true       
			                    },
			                    enableMouseTracking: false  
			                }
			            },
			            series: []
			    }
			    lineChartData_hg.series = data.list;
			    userRegistLines_hg = new Highcharts.Chart(lineChartData_hg);
				
			}
        },  
        error:function(xhr,textStatus,errorThrown){ 
        	jAlert("服务器异常，请稍后重试..");
        }  
    });

5、后台返回的json

{"errorInfo":"ok","list":[{"yAxis":0,"visible":true,"marker":{"enabled":false},"color":"#4572A7","name":"登录","data":[[1369852043000,1],[1405502337000,1],[1408180758000,3],[1408324354000,6],[1408430898000,6],[1408501492000,10],[1408586348000,6],[1408677130000,1],[1409205479000,2],[1409897710000,1],[1410773341000,1],[1410832946000,1],[1412839081000,1],[1413009726000,3]]}]}

5.效果图（附件）