extjs图表绘制之条形图实现方法分析 extjs图表绘制之条形图实现方法

本文实例讲述了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 = https://www.it610.com/article/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',},

【extjs图表绘制之条形图实现方法分析】display 可以改变文字在图表中的显示位置。‘insideStart'，‘insideEnd'，‘outside'分别代表在条形柱的最开始，最后面和外面。大家可以自己去试试。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。