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

最新推荐文章于 2017-12-28 15:23:35 发布

wangdingbang

最新推荐文章于 2017-12-28 15:23:35 发布

阅读量6.2k

点赞数

文章标签： extjs flash 报表 function layout url

本文链接：https://blog.csdn.net/wangdingbang2013/article/details/6280738

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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',