`

highcharts画线性图示例

highchartslinespringmvcajax 
阅读更多

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.效果图（附件）

 

 

 

  • 大小: 18.9 KB
分享到：
| js计算某个时间是当年的多少周
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Highcharts最全示例程序

    本压缩包"Highcharts-2.3.2"包含了Highcharts 2.3.2版本的源码和相关资源，为开发者提供了丰富的示例程序，以便更好地理解和应用这个强大的图表库。 首先，我们来深入了解一下Highcharts的基本特性： 1. **易用性*...

    Highcharts中文网示例及教程

    Highcharts中文网是一个专门提供Highcharts相关教程和示例的平台，旨在为中文用户学习和使用Highcharts提供便利。 首先，Highcharts的基本使用涉及到以下几个方面： 1. **引入资源**：在HTML文件中，我们需要引入...

    highCharts 展示图片示例

    highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要的朋友看看 另外 怎么用highcharts 和 fusioncharts 画 雷达图 ，仪表图 ，会的 朋友 ...

    Highcharts画折线图

    这个"Highcharts画折线图"的主题涉及到使用Highcharts来绘制动态、交互式的折线图，这对于数据可视化和数据分析来说是非常重要的。下面将详细介绍如何利用Highcharts库创建折线图以及相关的知识点。 1. **...

    Highcharts-4.0.3 示例 (添加次刻度尺)

    Highcharts-4.0.3 官方示例,添加样式更方便操作,修改源代码提供次刻度尺功能,修改部分之前版本的bug,修改示例详见:Line charts --&gt; Spline with symbols,仅供学习.

    highcharts加载多条曲线数据

    title: { text: '多条曲线数据示例' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: '值' } }, series: [ { ...

    highcharts示例代码（官方例子）

    在"highcharts示例代码（官方例子）"中，你将找到一系列官方提供的示例，这些示例涵盖了Highcharts的多种图表类型和功能。通过学习和研究这些示例，你可以快速掌握如何在自己的项目中应用Highcharts。 1. **基本...

    Highcharts几种简单的示例

    通过学习和实践这些简单示例，我们可以掌握Highcharts的基本用法，并在此基础上进一步定制和扩展，以满足特定的项目需求。无论是在数据分析、业务报告还是产品展示中，Highcharts都是一个非常实用的工具。

    Highcharts-3.0.6统计图表多种示例

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者创建出丰富、互动且美观的统计图表。在3.0.6版本中，这个库提供了多种图表类型，包括柱状图、折线图、饼图、散点图、面积图等，能够满足不同...

    Highcharts图表示例

    从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作...本资源是http://blog.csdn.net/zhoufoxcn/archive/2011/04/07/6306759.aspx一文的示例代码。

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的图表，包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中，雷达图常用于展示多维数据，每个轴代表一个特性或指标，数据点则...

    HighCharts源码和示例. 2.05Version

    总的来说，HighCharts凭借其强大的功能、友好的API和广泛的示例，成为了一个值得推荐的JavaScript图表库，无论是在数据可视化还是在报表制作中，都能发挥重要作用。对于开发者来说，理解和掌握HighCharts，无疑能够...

    HighCharts示例图

    "HighCharts示例图"是官方提供的一系列演示，涵盖了HighCharts的各种功能和应用场景。 在HighCharts-3.0.8这个压缩包中，你将找到一系列示例代码和资源，帮助你快速理解和应用HighCharts。以下是一些关键知识点的...

    Highcharts参考手册

    highcharts参考手册，列举highcharts属性大全及示例。

    highcharts 4.1.9 附DEMO（不是直接填值，新手需要）

    在"Highcharts-4.1.9"这个压缩包中，你将找到Highcharts的库文件、示例代码和相关的文档资源。通过查看这些示例，你可以学习到如何在自己的项目中集成Highcharts，如何配置图表参数，以及如何处理数据。对于初学者来...

    Highcharts示例、源码

    Highcharts JS是一个纯JavaScript制图Library，支持的图表类型包括：line、spline、area、areaspline、column、 bar、pie和scatter。当鼠标移到图表上时会利用一个tooltip展示每一点或区域上相关的文本信息。可以...

    jquery Highcharts jquery Highcharts

    在这个压缩包中，很可能包含了Highcharts的基本文件和示例代码，用于帮助开发者理解和使用这个库。 一、Highcharts简介 Highcharts是一个轻量级的图表库，支持多种图表类型，包括柱状图、折线图、饼图、散点图、...

    Learning Highcharts 示例源码

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途...此为，Learning Highcharts电子书配套示例源码。

    highcharts的js文件

    通过学习Highcharts的文档和示例，开发者可以定制出满足各种需求的高级数据可视化解决方案。 总之，Highcharts的js文件是构建数据可视化的强大工具，无论是简单的柱状图还是复杂的动态曲线图，都能轻松实现。通过...

    JS highcharts实现动态曲线代码示例

    Highcharts是一个制作图表的纯Javascript类库，　 　主要特性如下： 　兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 　对个人用户完全免费； 　纯JS，无BS； 　支持大部分的图表类型：直线图，曲线图...

Magicbox
Global site tag (gtag.js) - Google Analytics