Edson188的gravatar头像
Edson188 2015-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  LV8 2021年3月14日
hxx88781143  LV8 2020年5月6日
wanglong_wang  LV13 2019年8月1日
limushen  LV1 2018年12月6日
YorkHu  LV17 2018年7月4日
zhengdh123  LV10 2018年7月3日
zheng2018  LV2 2018年5月12日
ryoichi  LV1 2018年3月11日
laim1044  LV5 2017年12月25日
han108  LV16 2017年9月14日
最代码最近浏览分享源代码列表最近浏览
wangshule  LV14 2021年7月8日
and123456  LV11 2021年4月13日
NHealers  LV5 2021年3月30日
Sleachp  LV8 2021年3月14日
gxpcwm  LV22 2020年7月28日
suxuanouba  LV7 2020年6月8日
cz206616  LV10 2020年5月29日
hxx88781143  LV8 2020年5月6日
pmj2510  LV10 2020年4月16日
zhang123lr  LV1 2020年3月22日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友