extjs图表绘制之条形图实现方法分析
本文实例讲述了extjs图表绘制之条形图实现方法。分享给大家供大家参考,具体如下:
这篇文章将介绍extjs图表中条形图。
将实现以下的功能:
1.从后端请求数据并运用到图表中,形成动态数据。
2.查询出每年各个月中人数。
3.改变条形柱的颜色,改变默认的颜色换成自己想要的颜色。
renderer:function(sprite,storeItem,barAttr,i,store){ barAttr.fill='#3D96AE' returnbarAttr; },
先看完整的代码:
Ext.define('ChartColumnTest',{ extend:'Ext.panel.Panel', autoScroll:true, selectYear:null, initComponent:function(){ varme=this; me.store=me.createStore(); me.grid=me.getGridPanel(); me.mainPanel=Ext.create('Ext.panel.Panel',{ layout:'fit', items:[me.grid], tbar:me.createQueryTbar(), }); Ext.apply(me,{ layout:'fit', items:[me.mainPanel] }); me.callParent(); me.mainPanel.down('chart').on('cellclick',function(grid,td,cellIndex,record,tr,rowIndex,e,eOpts){ me.onCellClick(cellIndex,record); }); }, getGridPanel:function(){ varme=this; return{ xtype:'chart', animate:true,//是否支持动态数据变化 legend:{//图例 display:"bottom", spacing:2, padding:5, font:{ name:'Tahoma', color:'#3366FF', size:12, bold:true } }, store:me.store, axes:me.createAxes(), series:me.createSeries(), } }, createQueryTbar:function(){ varme=this; vartbar=[ { xtype:'combo', fieldLabel:'选择年份', name:'selectYear', queryMode:'local', editable:true, readOnly:false, labelWidth:60, width:200, store:newExt.data.ArrayStore({ fields:['id','name'], data:[] }), valueField:'name', displayField:'id', triggerAction:'all', autoSelect:true, listeners:{ beforerender:function(){ varnewyear=Ext.Date.format(newDate(),'Y');//这是为了取现在的年份数 varyearlist=[]; for(vari=newyear;i>=2015;i--){ yearlist.push([i,i]); } this.store.loadData(yearlist); } } }, {xtype:'button',text:'查找', listeners:{ "click":function(){ varvalue=Ext.ComponentQuery.query('[name=selectYear]')["0"].value; me.selectYear=value; me.store.load(); }}} ]; returntbar; }, createStore:function(){ varme=this; returnExt.create('Ext.data.JsonStore',{ //从后端请求数据 fields:[ {name:'id',mapping:'id'}, {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'}, 'activeCount','effectiveCount','effectiveProportion', ], proxy:{ type:'ajax', url:ctx+'/mvc/com/analyze/tblVwMonthUserStat', reader:{ type:'json', root:'root', totalProperty:'totalProperty' } }, listeners:{ 'beforeload':function(store,operation,eOpts){ store.proxy.extraParams.selectYear=me.selectYear } }, autoLoad:true }); }, createAxes:function(){ varme=this; varcolumns=[ { type:'Numeric', position:'left', minimum:1000, maximum:10000, label:{ renderer:Ext.util.Format.numberRenderer('0,0') }, title:'人数', grid:true, }, { type:'Numeric', position:'right', minimum:1000, maximum:10000, label:{ renderer:Ext.util.Format.numberRenderer('0,0') }, title:'人数', grid:true, }, { type:'Time', position:'bottom', fields:'statTime', step:[Ext.Date.MONTH,1], dateFormat:'y-m', title:'日期', grid:false, } ]; returncolumns; }, createSeries:function(){ varme=this; varcolumns=[ { type:'column', axis:'left', title:'活跃用户数', highlight:true, tips:{ trackMouse:true, width:200, height:28, renderer:function(storeItem,item){ this.setTitle("人数:"+storeItem.get('activeCount')+",占比:"+storeItem.get('effectiveProportion')); } }, //设置条形柱的颜色 renderer:function(sprite,storeItem,barAttr,i,store){ barAttr.fill='#3D96AE' returnbarAttr; }, //设置显示每个坐标上的文字 label:{ display:'outside', 'text-anchor':'middle', field:'activeCount', renderer:Ext.util.Format.numberRenderer('0'), orientation:'horizontal',//改变数字方向水平显示 font:'25pxHelvetica,sans-serif', 'text-anchor':'start', color:'red', }, xField:'statTime', yField:'activeCount', //yPadding:100,距离x轴的高度 }, ]; returncolumns; } });
下面讲解上图中的代码:
1.在panel中定义图表。条形图主要data(数据)、轴(y、x轴)、系列(series)组成。
2.定义查询的tbar,图中的数据是根据年份所查询出来的,用来动态显示。
3.在y轴上标刻的是人数,定义最大值和最小值,会自动调节每个间距的大小,position定义位置有‘left',‘right',bottom,‘top'四种
type:'Numeric', position:'left', minimum:1000, maximum:10000,
4.step 定义以多少为间隔,在此案例中,我以一个月为间隔。position定义位置有‘left',‘right',bottom,‘top'四种,grid:false不是网格布局。
{ type:'Time', position:'bottom', fields:'statTime', step:[Ext.Date.MONTH,1], dateFormat:'y-m', title:'日期', grid:false, }
5.tips 当鼠标放在图表上所显示的文字。在renderer方法中设置自己想显示的文字。
tips:{ trackMouse:true, width:200, height:28, renderer:function(storeItem,item){ this.setTitle("人数:"+storeItem.get('activeCount')+",占比:"+storeItem. get('effectiveProportion')); } },
6.可以在定义的系列中(series)中定义renderer方法,在此方法中改变条形柱的颜色。
renderer:function(sprite,storeItem,barAttr,i,store){ barAttr.fill='#3D96AE' returnbarAttr; },
7.可以在label中调节显示文字的方向和文字显示的位置。
label:{ display:'outside', 'text-anchor':'middle', field:'activeCount', renderer:Ext.util.Format.numberRenderer('0'), orientation:'horizontal',//改变数字方向水平显示 font:'25pxHelvetica,sans-serif', 'text-anchor':'start', color:'red', },
display可以改变文字在图表中的显示位置。‘insideStart',‘insideEnd',‘outside'分别代表在条形柱的最开始,最后面和外面。大家可以自己去试试。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。