Struts2和servlet+json开发入门highcharts图表框架demo实例源码下载

网上的highcharts资料很少github上都很少..

对hightcharts入门，以便于新手理解和学习提高兴趣

列子中有servlet传统的写法也有struts2的，springmvc的懒得写了会了自然就会了。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>highcharts+strtus2+json+axaj</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hightchartsLesson</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>

<script type="text/javascript">
$(function () {  
    var chart;  
	    $(document).ready(function() {
	    	/*
	    	异步目前只有这两种方式
	    	1.$.ajax
	    	2.$.getJSON
	    	3.想做到实时刷新在chart 中加个events: {load: function(){
	    		$.getJSON('',null,function(data){
	    		      逻辑自写
	    		});
	    	}}
                                         下面series 数据可以如我注释的方法获取
	    	*/
	        $.ajax({  
	            type: "POST", 
	            url: "HighChartsAction!findBasicLine.action",
	            contentType: "application/json; charset=utf-8",
	            dataType: "json",
	            data: "{}", 			
	            success: function (data) {
	            	/*
	            	解析返回是List对象的json
	            	var jStr = "[ ";
	            	for(var key in obj){ 
	            		var List = obj[key];
	            		for(var i in List){
	            			jStr += "{"+'"data"'+":";
	            			jStr += "[";
	            			jStr += List[i].data;
	            			jStr += "],";
	            			jStr += '"name"'+":";
	            			jStr += '"'+List[i].name+'"';
	            			jStr += "}"+',';
	            	  } 
	            	}
	            	jStr += " ]";
	            	alert(jStr);*/
	                chart = new Highcharts.Chart({  
	                      
	                    chart: {  
	                        renderTo: 'container', 
	                        type: 'column'
	                    },  
	                    title: {  
	                        text: 'Monthly Average Rainfall'  
	                    },  
	                    subtitle: {  
	                        text: 'Source: WorldClimate.com'  
	                    },  
	                    xAxis: {  
	                    	categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
	       								'May', 'Jun', 'Jul', 'Aug', 'Sep',
	       								'Oct', 'Nov', 'Dec' ]
	                    },  
	                    yAxis: {  
	                    	min : 0,
							title : {
								text : 'Rainfall (mm)'
							}
	                    },  
	                    tooltip : {
							headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
							pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
									+ '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
							footerFormat : '</table>',
							shared : true,
							useHTML : true
						},
						plotOptions : {
							column : {
								pointPadding : 0.2,
								borderWidth : 0
							}
						},
						series :data
						/*
						返回list对象解析json的绑定方法
						[{
			                name: (function() {
			                	for(var key in obj){ 
			                		var List = obj[key];
			                		for(var i in List){
			                		   name=List[i].name; 
			                	  } 
			                	}
			                    return name;
				                })(),
			                data: (function() {                       
			                	for(var key in obj){ 
			                		var List = obj[key];
			                		for(var i in List){ 
			                		   data=List[i].data;
			                	  } 
			                	}
			                    return data;
				                })()
				            }]*/
	                });  
	            }  
	        });  
	    });
});	
</script>
</head>
<body>
	<div id="result"></div>
	<div id="container"
		style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

猜你喜欢

打赏

1个评论

5个牛币 Struts Highcharts 图形报表框架 Java

文件名:HighChartsLesson.rar,文件大小:5205.494K 下载