ExtJs 绘制柱状图


ExtJs 绘制柱状图_第1张图片


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>


你可能感兴趣的:(function,String,ext,ExtJs,Path,stylesheet)