ExtJS 3.0 Chart 小用一下

实际上就是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" 
},

这个是“事件个数”和“告警个数”的标示吧。

11 楼 amygg 2009-09-22  

不错，在服务器下运行就ok了，但是不管是ie还是其他浏览器必须指定swf。

10 楼 goodfifa08 2009-09-22  

并不是url的问题，是浏览器，用谷歌浏览器就显示不出来，我换成IE和遨游都可以显示。
结果不用指定swf都行，但是不知道会不会有什么影响。

9 楼 goodfifa08 2009-09-22  

我郁闷，example-charts-charts.js的第一个panel没有指定URL！！！
加上url就行了。

8 楼 atian25 2009-09-21  

指定下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.
这是什么原因呢？

提示文字写的很清楚了,只能在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.
这是什么原因呢？

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]

本来希望他们能自己搞提要的华丽的图表的，封装别人的东西。。而已

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]

2 楼 yourgame 2009-08-04  

不错.学习了:)

1 楼 damoqiongqiu 2009-06-26  

效果不错，关注。