ExtJS 3.0 中的Flash报表的使用之一：柱状图、横向柱状图、折线图、饼状图

最新推荐文章于 2018-11-08 09:45:57 发布

原创最新推荐文章于 2018-11-08 09:45:57 发布 · 6.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #flash #报表 #function #layout

本文介绍如何使用ExtJS创建各种类型的图表，包括柱状图、横向柱状图、折线图及饼状图等，并提供了具体的代码实现示例。

ExtJS 也是用一段时间了，但是用的很粗糙，需要好好的捋捋了。------柱状图，使用的非常多。

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord),
sortInfo: {field: 'name', direction: 'DESC'}//data 是joson格式的数据

new Ext.Panel({
   title:'Chart',
   renderTo:'container',
   width:500,
   height:300,
   layout:'fit',
   items:{
   xtype:'columnchart',
   url:'../../resources/charts.swf',
   store:store,
   xField:'name',
   yFiled:'visits',
   listeners:{
   itemsclick:function(o){
         var rec=store.getAt(o.index);
          Ext.example.msg('Item Selected','You chose {0}.','rec.get('name')');
   }
   }
   }
});

横向柱状图：xtype:'barchart',

折线图：xtype:'linechart',

饼状图：xtype:'piechart',