本文实例讲述了extjs图表绘制之条形图实现方法。分享给大家供大家参考,具体如下:
这篇文章将介绍extjs图表中条形图。
将实现以下的功能:
1.从后端请求数据并运用到图表中,形成动态数据。
2.查询出每年各个月中人数。
3.改变条形柱的颜色,改变默认的颜色换成自己想要的颜色。
renderer: function(sprite, storeItem, barAttr, i, store) { barAttr.fill = '#3D96AE' return barAttr; },
先看完整的代码:
Ext.define('ChartColumnTest', { extend: 'Ext.panel.Panel', autoScroll : true, selectYear:null, initComponent: function () { var me = 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(){ var me = 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(){ var me=this; var tbar=[ { xtype : 'combo', fieldLabel:'选择年份', name:'selectYear', queryMode : 'local', editable : true, readOnly:false, labelWidth: 60, width:200, store : new Ext.data.ArrayStore({ fields : ['id','name'], data : [] }), valueField : 'name', displayField : 'id', triggerAction : 'all', autoSelect : true, listeners : { beforerender : function(){ var newyear = Ext.Date.format(new Date(),'Y');//这是为了取现在的年份数 var yearlist = []; for(var i = newyear;i>=2015;i--){ yearlist.push([i,i]); } this.store.loadData(yearlist); } } }, {xtype: 'button',text : '查找', listeners : { "click" : function() { var value = Ext.ComponentQuery.query('[name=selectYear]')["0"].value; me.selectYear = value; me.store.load(); }}} ]; return tbar; }, createStore: function () { var me = this; return Ext.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 () { var me = this; var columns = [ { 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, } ]; return columns; }, createSeries: function () { var me = this; var columns = [ { 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' return barAttr; }, //设置显示每个坐标上的文字 label: { display: 'outside', 'text-anchor': 'middle', field: 'activeCount', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'horizontal',//改变数字方向 水平显示 font: '25px Helvetica, sans-serif', 'text-anchor': 'start', color: 'red', }, xField: 'statTime', yField: 'activeCount', // yPadding:100, 距离x轴的高度 }, ]; return columns; } });
下面讲解上图中的代码:
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' return barAttr; },
7.可以在label中调节显示文字的方向和文字显示的位置。
label: { display: 'outside', 'text-anchor': 'middle', field: 'activeCount', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'horizontal',//改变数字方向 水平显示 font: '25px Helvetica, sans-serif', 'text-anchor': 'start', color: 'red', },
display 可以改变文字在图表中的显示位置。‘insideStart',‘insideEnd',‘outside'分别代表在条形柱的最开始,最后面和外面。大家可以自己去试试。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。