【编程技巧】实现简单柱状图
<%@ 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>gridPanel</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="ext/ux/shared/examples.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.chart.Chart.CHART_URL ="ext/resources/charts.swf";//显示用的swf,一定要加上
Ext.onReady(function(){ //ext.onReady是网页一加载完的时候就会加载此方法
Ext.BLANK_IMAGE_URL='../../ext/resources/images/access/tree/s.gif';
var data = {
rows:[
{id:0,name:'tom',age:24},
{id:1,name:'jay',age:18},
{id:2,name:'aaa',age:33}
]
};
var jsonStore = new Ext.data.JsonStore({
root:"rows",
data:data,
fields:[
{name:'personId',mapping:'id'},
{name:'personName',mapping:'name'},
{name:'personAge',mapping:'age'}
],
autoLoad:true
});
new Ext.Panel({
title:'货币基金储备',
width:500,
height:400,
frame:true,
applyTo:'panel',
layout:'fit',
items:{
xtype:'columnchart',
store:jsonStore,
xField:'personName',
yField:'personAge',
listeners:{
itemclick:function(o) {
var rec = jsonStore.getAt(o.index);
Ext.MessageBox.alert('选择提示','您选择了'+rec.get('personName'));
}
}
}
});
});
</script>
<div id='panel'>
</body>
</html>
