- 浏览: 462530 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
njliukang:
请问一下,如果是异步树,应该怎么解决?貌似用expandpat ...
ExtJS Tree刷新后自动展开并选择节点 -
xiaoyueyue5721:
这是ScriptDataSet,如果换成OdaDataSet呢 ...
Birt动态填充DataSet数据 -
leexiaodong2009:
我准备要用那个锁定。
ExtJS 3.0 优秀扩展简介 (持续更新) -
babyhhcsy:
pizza823 写道分享下另外中方法store里面不用变在列 ...
ExtJS EditorGridPanel中时间日期编辑问题的总结 -
冷月宫主:
高手,请问一下有没有使用Ext做过多表头锁定左侧指定列的处理? ...
仅供纪念,曾做过的一些界面截图
实际上就是YUI CHART, 具体的文档可以看: http://developer.yahoo.com/yui/charts/
而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:http://developer.yahoo.com/flash/astra-flash/
先上个图:
代码如下:
1.定义store
//定义store var chartStore = new Ext.data.JsonStore({ root:'data', fields:[ { //似乎有bug,labelfunction不好用,就自己处理一个field来当x轴标签 name:'label', mapping:'endTime', convert:function(v,record){ return Date.parseDate(v, 'Y-m-d H:i:s').format('H:i'); } }, {name:'startTime',type:'date',dateFormat:'Y-m-d H:i:s'}, {name:'endTime',type:'date',dateFormat:'Y-m-d H:i:s'}, {name:'alarmCount',type:'int'}, {name:'eventCount',type:'int'} ], sortInfo:{field: 'startTime', direction: 'ASC'} }); //测试数据 var obj={ startTime:'2009-06-22 01:00:00', endTime:'2009-06-23 01:00:00', interval:60, data:[ {startTime:'2009-06-22 01:00:00',endTime:'2009-06-22 02:00:00',alarmCount:02,eventCount:15}, {startTime:'2009-06-22 02:00:00',endTime:'2009-06-22 03:00:00',alarmCount:03,eventCount:0}, {startTime:'2009-06-22 03:00:00',endTime:'2009-06-22 04:00:00',alarmCount:04,eventCount:15}, {startTime:'2009-06-22 04:00:00',endTime:'2009-06-22 05:00:00',alarmCount:15,eventCount:25}, {startTime:'2009-06-22 05:00:00',endTime:'2009-06-22 06:00:00',alarmCount:06,eventCount:15}, {startTime:'2009-06-22 06:00:00',endTime:'2009-06-22 07:00:00',alarmCount:0,eventCount:20}, {startTime:'2009-06-22 07:00:00',endTime:'2009-06-22 08:00:00',alarmCount:0,eventCount:0}, {startTime:'2009-06-22 08:00:00',endTime:'2009-06-22 09:00:00',alarmCount:09,eventCount:15}, {startTime:'2009-06-22 09:00:00',endTime:'2009-06-22 10:00:00',alarmCount:10,eventCount:15}, {startTime:'2009-06-22 10:00:00',endTime:'2009-06-22 11:00:00',alarmCount:11,eventCount:25}, {startTime:'2009-06-22 11:00:00',endTime:'2009-06-22 12:00:00',alarmCount:12,eventCount:75}, {startTime:'2009-06-22 12:00:00',endTime:'2009-06-22 13:00:00',alarmCount:13,eventCount:12}, {startTime:'2009-06-22 13:00:00',endTime:'2009-06-22 14:00:00',alarmCount:14,eventCount:10}, {startTime:'2009-06-22 14:00:00',endTime:'2009-06-22 15:00:00',alarmCount:45,eventCount:60}, {startTime:'2009-06-22 15:00:00',endTime:'2009-06-22 16:00:00',alarmCount:16,eventCount:25}, {startTime:'2009-06-22 16:00:00',endTime:'2009-06-22 17:00:00',alarmCount:17,eventCount:8}, {startTime:'2009-06-22 17:00:00',endTime:'2009-06-22 18:00:00',alarmCount:18,eventCount:47}, {startTime:'2009-06-22 18:00:00',endTime:'2009-06-22 19:00:00',alarmCount:29,eventCount:35}, {startTime:'2009-06-22 19:00:00',endTime:'2009-06-22 20:00:00',alarmCount:20,eventCount:15}, {startTime:'2009-06-22 20:00:00',endTime:'2009-06-22 21:00:00',alarmCount:21,eventCount:10}, {startTime:'2009-06-22 21:00:00',endTime:'2009-06-22 22:00:00',alarmCount:22,eventCount:5}, {startTime:'2009-06-22 22:00:00',endTime:'2009-06-22 23:00:00',alarmCount:53,eventCount:15}, {startTime:'2009-06-22 23:00:00',endTime:'2009-06-23 00:00:00',alarmCount:24,eventCount:33}, {startTime:'2009-06-23 00:00:00',endTime:'2009-06-23 01:00:00',alarmCount:11,eventCount:0} ] } //载入数据 chartStore.loadData(obj);
2.定义chart
var chartWin = new Ext.Window({ title:'::近24小时告警分布图表::', layout:'fit', closeAction:'hide', plain: true, height:300, width:1000, items:[{ xtype:'linechart', url: '/js/extjs/3.0/resources/charts.swf', store:chartStore, //xField: 'label', //yField:'alarmCount', //定义tip内容 tipRenderer : function(chart, record){ var startTime = record.get('startTime').format('y-m-d H:i'); var endTime = record.get('endTime').format('y-m-d H:i'); var str = String.format('开始时间:{0}\n结束时间:{1}\n告警数:{2}\n事件数:{3}',startTime,endTime,record.get('alarmCount'),record.get('eventCount')) return str; }, //定义两个图表,一个是柱状图,一个是折线图 series: [{ type: 'column', displayName: '事件个数', xField: 'label', yField: 'eventCount', style: { color:0x99BBE8, size: 20 } },{ type:'line', displayName: '告警', xField: 'label', yField: 'alarmCount', style: { color: 0x15428B } }], //定义图表样式 chartStyle: { //不知道为啥没出来这个图示 legend:{ display: "top" }, xAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length:4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines:{size: 1, color: 0xeeeeee} }, yAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xdfe8f6} } } }] });
更多的样式定义可以看上面给出的连接。
PS: 有谁知道如何偏移图表内容不?
就是想把整个图表的内容左移一点,以便让标签和gridline处于每个点的图表的中间.
如下图,我是希望柱状是居中的,也就是以标签为中心,两边扩展
翻了yui chart的文档,没找到接口.
有知道的兄弟帮忙回答下: http://www.iteye.com/problems/19444
090712 补充:
ExtJS3.0正式版后就解决我的问题了...看来估计是chart swf的bug..
如下图,没有修改任何代码,图表就居中,而且图示也出来了.
评论
17 楼
wanghaitao
2012-09-20
amygg 写道
不错,在服务器下运行就ok了,但是不管是ie还是其他浏览器必须指定swf。
很棒。。
16 楼
lijunlong
2011-12-03
15 楼
goodfifa08
2009-09-25
atian25 写道
firebug检查下你的swf的路径是否正确
<object id="extflashcmp1001" height="100%" width="100%" type="application/x-shockwave-flash" data="http://localhost:8088/Project/js/Ext/resources/charts.swf" style="visibility: visible;"> <param name="allowScriptAccess" value="always"/> <param name="bgcolor" value="#ffffff"/> <param name="wmode" value="opaque"/> <param name="flashvars" value="allowedDomain=localhost&elementID=extflashcmp1001&eventHandler=Ext.FlashEventProxy.onEvent"/> </object>
路径是对的
14 楼
atian25
2009-09-24
firebug检查下你的swf的路径是否正确
13 楼
goodfifa08
2009-09-24
amygg 写道
不错,在服务器下运行就ok了,但是不管是ie还是其他浏览器必须指定swf。
我在ff里面指定了URL也无法显示:
Ext.chart.Chart.CHART_URL = '../Ext/resources/charts.swf';
12 楼
love_cy
2009-09-24
legend:{
display: "top"
},
这个是“事件个数”和“告警个数”的标示吧。
display: "top"
},
这个是“事件个数”和“告警个数”的标示吧。
11 楼
amygg
2009-09-22
不错,在服务器下运行就ok了,但是不管是ie还是其他浏览器必须指定swf。
10 楼
goodfifa08
2009-09-22
并不是url的问题,是浏览器,用谷歌浏览器就显示不出来,我换成IE和遨游都可以显示。
结果不用指定swf都行,但是不知道会不会有什么影响。
结果不用指定swf都行,但是不知道会不会有什么影响。
9 楼
goodfifa08
2009-09-22
我郁闷,example-charts-charts.js的第一个panel没有指定URL!!!
加上url就行了。
加上url就行了。
8 楼
atian25
2009-09-21
指定下swf的位置:
如url: '/js/extjs/3.0/resources/charts.swf',
如url: '/js/extjs/3.0/resources/charts.swf',
7 楼
goodfifa08
2009-09-21
$(document).ready(function(){ var store = new Ext.data.JsonStore({ fields: ['name', 'visits', 'views'], data: [{ name: 'Jul 07', visits: 245000, views: 3000000 }, { name: 'Aug 07', visits: 240000, views: 3500000 }, { name: 'Sep 07', visits: 355000, views: 4000000 }, { name: 'Oct 07', visits: 375000, views: 4200000 }, { name: 'Nov 07', visits: 490000, views: 4500000 }, { name: 'Dec 07', visits: 495000, views: 5800000 }, { name: 'Jan 08', visits: 520000, views: 6000000 }, { name: 'Feb 08', visits: 620000, views: 7500000 }] }); // extra extra simple new Ext.Panel({ title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)', renderTo: 'container', width: 500, height: 300, layout: 'fit', items: { xtype: 'linechart', store: store, xField: 'name', yField: 'visits', listeners: { itemclick: function(o){ var rec = store.getAt(o.index); Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name')); } } } }); });
这是我在容器里面加的,现在不是提示红色字体的错误了,而是一片空白
6 楼
atian25
2009-09-21
goodfifa08 写道
我直接打开3.0example里的charts,显示不出来曲线图,只有一些红色的字:
communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player.
这是什么原因呢?
communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player.
这是什么原因呢?
提示文字写的很清楚了,只能在web容器下执行.
你直接双击,本地播放是不行的.
如果你写过flash就知道了.
5 楼
goodfifa08
2009-09-21
我直接打开3.0example里的charts,显示不出来曲线图,只有一些红色的字:
communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player.
这是什么原因呢?
communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player.
这是什么原因呢?
4 楼
会飞的狗
2009-08-23
atian25 写道
实际上就是YUI CHART, 具体的文档可以看: http://developer.yahoo.com/yui/charts/
而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:[url]http://developer.yahoo.com/flash/astra-flash/ [/url]
而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:[url]http://developer.yahoo.com/flash/astra-flash/ [/url]
本来希望他们能自己搞提要的华丽的图表的,封装别人的东西。。而已
3 楼
atian25
2009-08-06
实际上就是YUI CHART, 具体的文档可以看: http://developer.yahoo.com/yui/charts/
而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:[url]http://developer.yahoo.com/flash/astra-flash/ [/url]
而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:[url]http://developer.yahoo.com/flash/astra-flash/ [/url]
2 楼
yourgame
2009-08-04
不错.学习了:)
1 楼
damoqiongqiu
2009-06-26
效果不错,关注。
发表评论
-
[4.x] Ext.ux.button.AutoRefresher
2011-05-23 11:22 2667/** * @class Ext.ux.b ... -
ExtJS 4.x 定制你的js
2011-05-01 00:04 0... -
ExtJS4.x 随笔(2011-04-29更新)
2011-04-29 13:41 36971.某个激活/禁用的checkboxfield,需要提交后台的 ... -
ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)
2011-04-27 15:24 12530Ext4.0 自带的Ext.ux.RowEditing还不够完 ... -
ExtJS Tree刷新后自动展开并选择节点
2010-07-29 10:48 17620很久没写EXTJS的tip了... 今天帮组员写了一个 ... -
仅供纪念,曾做过的一些界面截图
2010-07-06 16:55 3371仅供记录用. 1.亚运(EXTJS) ... -
ExtJS3.x 随笔(2010-07-08更新)
2010-07-02 17:15 3519谨用该贴来记录一些使 ... -
Ext JS 3.2.0发布 -- 不少令人振奋的特性(更新翻译后的release-notes)
2010-04-01 15:02 3730不少令人振奋的新功能 1.form里面的复合组件 ---写 ... -
ExtJS EditorGridPanel中时间日期编辑问题的总结
2009-09-23 09:48 10141老是被反复问到这个问题,烦了...总结下... 1.首 ... -
Ext 3.0.1 Release Notes
2009-08-31 07:58 3920难熬的三天....JE终于恢复了.... 可惜要付费 ... -
也谈谈Ext.Grid之记录用户使用习惯—隐藏列
2009-08-27 15:58 7549在论坛看到http://www.iteye ... -
ExtJS 常见问题 - by tz
2009-08-14 16:13 0经常在群里面被问到的一些问题,不如汇集起来算了... ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2009-08-14 10:14 17182自带示例里面的扩展就 ... -
ExtJS 2.3/3.0 定制你所需要的模块
2009-08-12 13:49 13221很实在的一个需求,就是 ... -
ExtJS Combo 下拉列表正常显示HTML标签内容
2009-08-11 15:02 5862解决问题: http://www.iteye.com/pro ... -
ExtJS 3.0 Designer Preview (官方的IDE可视化工具)
2009-08-11 12:35 24634原文地址: http://extjs.com/blog/200 ... -
ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案
2009-08-06 12:41 61362010-07-08补充: DateField隐藏的 ... -
ExtJS 输入框/MessageBox.prompt 禁止粘贴
2009-07-30 13:33 6734回答问题http://www.iteye.com/proble ... -
ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug
2009-07-27 16:16 11288如果你不知道lovcombo是什么,看http://setti ... -
续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)
2009-07-27 15:55 5896续前文:http://atian25.iteye.com/bl ...
相关推荐
extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
ExtJS3.0 源码分析与开发实例宝典
Extjs3.0中文API文档 够详细 够详细 够详细
extjs3.0框架extjs3.0框架extjs3.0框架extjs3.0框架
由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发带来了一些麻烦。虽然网上有ext2.0的日期扩展控件,但...公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
在网络上搜集,自己安装成功后在使用的开发环境。因ExtJS3.0和spket-1.6.18.jar的开发包太大不能上传,里面有安装说明和下载路径 ext-jsb2.zip jsb2是最新的。。请所需者取之
ExtJs3.0API,希望对大家有所帮助
extjs3.0开发包包含api、例子、源文件等,简单易用,
ExtJS 3.0 学习资源,有兴趣的 可以下载看看!!!!
ExtJS 3.0 API 文档离线包,
extjs框架,学习,开发,extjs3.0开发包以及文档
真正的ExtJS 3.0可视化开发工具,支持WebUI和Code可视化设计.
EXT登陆,整合STRUTS2,SPRING,IBATIS,EXTJS3.0,详细的请看看代码,因为jar包较大,暂不加jar包。的请看看代码,因为jar包较大,暂不加jar包
ExtJSweb 开发指南中的 简单图书管理系统 ExtJS3.0+spring+hibernate+struts
extjs3.0中英文对照chm api
深入浅出 Extjs3.0 中文文档,深入浅出 Extjs3.0 中文文档
extjs3.0.chm API extjs3.0.chm API extjs3.0.chm API extjs3.0.chm API
ExtJs3.0 中文破解视图编辑器.rar AIR安装程序 Ext 帮组文档 你的支持就是我上传的动力 资源共享