extjs图表-条形图

╰半橙微兮° 2021-09-14 13:02 567阅读 0赞

本篇文章将介绍extjs图表中条形图。

将实现以下的功能：

1.从后端请求数据并运用到图表中，形成动态数据。

2.查询出每年各个月中人数。

3.改变条形柱的颜色，改变默认的颜色换成自己想要的颜色。

renderer: function(sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = '#3D96AE'
                        return barAttr;
                    },

![20171228164304445][]

先看完整的代码：

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’分别代表在条形柱的最开始，最后面和外面。大家可以自己去试试。

[20171228164304445]: /images/20210813/b64e017ad8fe40bfb2df4e5347f35c4a.png