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


Posted in Javascript onMarch 06, 2020

本文实例讲述了extjs图表绘制之条形图实现方法。分享给大家供大家参考,具体如下:

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

将实现以下的功能:

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

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

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

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

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

先看完整的代码:

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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 #Javascript
JS实现网页端猜数字小游戏
Mar 06 #Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 #Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 #Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 #Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 #Javascript
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
js 替换
2008/02/19 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
大学毕业生简单自荐信
2013/11/05 职场文书
销售经理岗位职责
2014/03/16 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
工程催款通知书
2015/04/17 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers