|
锁定老帖子 主题：ExtJS 3.0 Chart 小用一下
精华帖 (0) :: 良好帖 (14) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-06-24
最后修改：2009-08-06
实际上就是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处于每个点的图表的中间. 如下图,我是希望柱状是居中的,也就是以标签为中心,两边扩展
有知道的兄弟帮忙回答下: http://www.iteye.com/problems/19444
090712 补充: ExtJS3.0正式版后就解决我的问题了...看来估计是chart swf的bug.. 如下图,没有修改任何代码,图表就居中,而且图示也出来了.
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：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] |
| 返回顶楼 | |
|
发表时间：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] 本来希望他们能自己搞提要的华丽的图表的，封装别人的东西。。而已 |
| 返回顶楼 | |
|
发表时间：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. 这是什么原因呢？ |
| 返回顶楼 | |
|
发表时间：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. 这是什么原因呢？ 提示文字写的很清楚了,只能在web容器下执行. 你直接双击,本地播放是不行的. 如果你写过flash就知道了. |
| 返回顶楼 | |
|
发表时间：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'));
}
}
}
});
});
这是我在容器里面加的，现在不是提示红色字体的错误了，而是一片空白 |
| 返回顶楼 | |
|
发表时间：2009-09-21
指定下swf的位置:
如url: '/js/extjs/3.0/resources/charts.swf', |
| 返回顶楼 | |
|
发表时间：2009-09-22
我郁闷，example-charts-charts.js的第一个panel没有指定URL！！！
加上url就行了。 |
| 返回顶楼 | |
|
发表时间：2009-09-22
最后修改：2009-09-22
并不是url的问题，是浏览器，用谷歌浏览器就显示不出来，我换成IE和遨游都可以显示。
结果不用指定swf都行，但是不知道会不会有什么影响。 |
| 返回顶楼 | |
|
发表时间：2009-09-22
不错，在服务器下运行就ok了，但是不管是ie还是其他浏览器必须指定swf。
|
| 返回顶楼 | |
