Ext Js 3.2 柱状图应用
2011-11-15 11:25
357 查看
1:源代码
2:效果图
将xtype指定为columnchart,就是在一个Panel中创建一个柱状图,该图中的所有数据都是由上面定义的store提供的,xField指定横坐标的数据内容,
这里指定了name属性,yField指定纵坐标显示的数据,这里指定visits属性
<%@ 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"> 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')); } } } }); }); </script> </head> <body> <div id="container"> </div> </body> </html>
2:效果图
将xtype指定为columnchart,就是在一个Panel中创建一个柱状图,该图中的所有数据都是由上面定义的store提供的,xField指定横坐标的数据内容,
这里指定了name属性,yField指定纵坐标显示的数据,这里指定visits属性
相关文章推荐
- Ext Js 3.2 表格应用复选框
- Ext Js3.2 折线图应用
- Ext Js 3.2的一个FormPanel的综合应用
- Ext Js 3.2 折叠布局-AccordionLayout的应用
- Ext Js 3.2 柱状栈图的应用
- Ext Js 3.2 边框布局--BorderLayout的应用
- Ext Js 3.2 饼状图应用
- cocos2d-x 3.2 for wp8-xaml应用商店提交应用时出现的API错误(不能用CreateEventExA)解决办法
- 使用JFreeChart生成柱状图,不做任何注释,只求应用,生成的柱状图放在D:\\fruit.jpg
- Ext js 框架快速集成当前应用
- PHP 画图应用 验证码 柱状图
- Ext Js 3.2中关于PropertyGrid即属性表格的使用
- Ext Js 3.2 显示行号
- Ext JS 4百强应用:ComboBox是什么?怎么使用?--第2强
- 稀疏矩阵的三元组表示的应用(3.2)
- Ext JS 4 架构你的应用 第1节 (官方文档翻译)
- Ext JS百强应用:谈谈json 与 jsonp 的区别 --第1强
- OWC 的应用 - 柱状图(VB.NET)
- Ext Js 3.2 锚点布局---AnchorLayout
- [Hibernate]在VS2010中应用NHibernate 3.2与MySQL