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月',load:11},"+ "{month:'8月',load:8},"+ "{month:'9月',number:40,"+ "{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 : 300,items : [{ xtype : 'stackedcolumnchart',url : '<%=rootpath%>/ext/resources/charts.swf',store : store,xField : 'month',series : [{ //number使用柱状图 type : 'column',yField : 'number',displayName : 'number' },{ //load使用折线图 type : 'line',yField : 'load',displayName : 'load' }],yAxis : new Ext.chart.NumericAxis({ stackingEnabled : true }) }] }); var vp = new Ext.Viewport({ items : [p] }); }); </script> </head> <body> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。