Extjs-Flash报表横向柱状图

来源：互联网发布：sql中union和union all 编辑：程序博客网时间：2024/05/22 17:56

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月', number: 80},"+"{month:'8月', number: 60},"+"{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 : 'barchart',            url : '<%=rootpath%>/ext/resources/charts.swf',            store : store,            yField : 'month',        xField : 'number'       }]});var vp = new Ext.Viewport({items : [p]});});    </script>  </head>  <body>  </body></html>

Extjs-Flash报表 横向柱状图

Extjs-Flash报表横向柱状图