Extjs-Flash报表横向柱状栈图

最新推荐文章于 2017-12-28 15:23:35 发布

itlwc

最新推荐文章于 2017-12-28 15:23:35 发布

阅读量1.1k

点赞数

分类专栏： Extjs 文章标签：报表 stylesheet json string url html

本文链接：https://blog.csdn.net/itlwc/article/details/7864684

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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,load:3},"+
		"{month:'2月', number:80,load:4},"+
		"{month:'3月', number:50,load:2},"+
		"{month:'4月', number:60,load:1},"+
		"{month:'5月', number:45,load:6},"+
		"{month:'6月', number:70,load:7},"+
		"{month:'7月', number:80,load:11},"+
		"{month:'8月', number:60,load:8},"+
		"{month:'9月', number:40,load:2},"+
		"{month:'10月', number:30,load:14},"+
		"{month:'11月', number:55,load:18},"+
		"{month:'12月', number:32,load:8}"
	+"]}";
	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'},
				{name : 'load'}
			]);
			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 : 350,
		        items : [{
		            xtype : 'stackedbarchart',
		            url : '<%=rootpath%>/ext/resources/charts.swf',
		            store : store,
		            yField : 'month',
		            //因为柱状栈图拥有多个横轴,所有要使用series代替
		            series : [{
		            	xField : 'number',
		            	displayName : 'number'
		            },{
		            	xField : 'load',
		            	displayName : 'load'
		            }],
		            xAxis : new Ext.chart.NumericAxis({
		            	//true表示图一,false表示图二
		            	stackingEnabled : true
		            })
		       }]
			});
			var vp = new Ext.Viewport({
				items : [p]
			});
		});

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

itlwc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs-Flash报表横向柱状栈图

1.效果图图一图二2.list.jsp<% request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String json = "{totalProperty : 10,root:["+ "{month:'1月', num
复制链接

扫一扫