Edson188的gravatar头像
Edson1882015-03-11 16:30:54

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>

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

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


打赏

文件名:HighChartsLesson.rar,文件大小:5205.494K下载
  • /
      • /HighChartsLesson
        • /HighChartsLesson/.classpath
        • /HighChartsLesson/.project
          • /HighChartsLesson/.settings
            • /HighChartsLesson/.settings/.jsdtscope
            • /HighChartsLesson/.settings/org.eclipse.core.resources.prefs
            • /HighChartsLesson/.settings/org.eclipse.jdt.core.prefs
            • /HighChartsLesson/.settings/org.eclipse.wst.common.component
            • /HighChartsLesson/.settings/org.eclipse.wst.common.project.facet.core.xml
            • /HighChartsLesson/.settings/org.eclipse.wst.jsdt.ui.superType.container
            • /HighChartsLesson/.settings/org.eclipse.wst.jsdt.ui.superType.name
          • /HighChartsLesson/build
              • /HighChartsLesson/build/classes
                  • /HighChartsLesson/build/classes/com
                      • /HighChartsLesson/build/classes/com/highcharts
                          • /HighChartsLesson/build/classes/com/highcharts/lesson
                              • /HighChartsLesson/build/classes/com/highcharts/lesson/bean
                                • /HighChartsLesson/build/classes/com/highcharts/lesson/bean/StudentInfo.class
最代码最近下载分享源代码列表最近下载
Sleachp LV82021年3月14日
月亮月亮
hxx88781143 LV82020年5月6日
月亮月亮
wanglong_wang LV122019年8月1日
月亮月亮月亮
limushen LV12018年12月6日
星星
YorkHu LV172018年7月4日
太阳星星
zhengdh123 LV102018年7月3日
月亮月亮星星星星
zheng2018 LV22018年5月12日
星星星星
ryoichi LV12018年3月11日
星星
laim1044 LV52017年12月25日
月亮星星
han108 LV162017年9月14日
太阳
最代码最近浏览分享源代码列表最近浏览
wangshule LV142021年7月8日
月亮月亮月亮星星星星
and123456 LV112021年4月13日
月亮月亮星星星星星星
NHealers LV42021年3月30日
月亮
Sleachp LV82021年3月14日
月亮月亮
gxpcwm LV212020年7月28日
太阳月亮星星
suxuanouba LV72020年6月8日
月亮星星星星星星
cz206616 LV102020年5月29日
月亮月亮星星星星
hxx88781143 LV82020年5月6日
月亮月亮
pmj2510 LV102020年4月16日
月亮月亮星星星星
zhang123lr LV12020年3月22日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友