微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Extjs-Flash报表 折线图

1.效果


2.list.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String json = "{totalProperty : 10,root:["+
		"{month:'1月',number: 20},"+
		"{month:'2月',number: 80},"+
		"{month:'3月',number: 50},"+
		"{month:'4月',number: 60},"+
		"{month:'5月',number: 45},"+
		"{month:'6月',number: 70},"+
		"{month:'7月',"+
		"{month:'8月',"+
		"{month:'9月',number: 40},"+
		"{month:'10月',number: 30},"+
		"{month:'11月',number: 55},"+
		"{month:'12月',number: 32}]}";
	System.out.print(json);
	response.getWriter().write(json);
%>

3.index.jsp
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getcontextpath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.QuickTips.init();
			Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
			
			var record = new Ext.data.Record.create([
				{name : 'month'},{name : 'number'}
			]);
			var store = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
					url : 'list.jsp'
				}),reader : new Ext.data.JsonReader({
					totalProperty : 'totalProperty',root : 'root',fields: record
				})
			});
			store.load();
			var p = new Ext.Panel({
				title : '月份访问量',width : 500,height : 300,items : [{
		            xtype : 'linechart',url : '<%=rootpath%>/ext/resources/charts.swf',store : store,xField : 'month',yField : 'number'
		       }]
			});
			var vp = new Ext.Viewport({
				items : [p]
			});
		});

    </script>
  </head>
  <body>
  </body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐