ExtJs 绘制柱状图
chart.js
Ext.onReady(function() { // 定义ColumnModel
var store = new Ext.data.JsonStore({
fields : ['name', 'visits', 'views'],
data : [{
name : '湖北',
visits : 245000,
views : 3000000
}, {
name : '湖南',
visits : 240000,
views : 3500000
}, {
name : '北京',
visits : 355000,
views : 2000000
}, {
name : '上海',
visits : 375000,
views : 3200000
}, {
name : '深圳',
visits : 590000,
views : 3500000
}, {
name : '广州',
visits : 395000,
views : 6800000
}, {
name : '浙江',
visits : 580600,
views : 8500000
}]
});
new Ext.Panel({
title : '各省货币基金储备',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}.', rec
.get('name'));
}
}
}
});
});
chart.jsp
<%@ 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="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="js/chart.js"></script> </head> <body> <div id="container"> </div> </body> </html>