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

更新时间：2020年03月06日 09:49:40 作者：程序媛-jjl

这篇文章主要介绍了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 = 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程序设计有所帮助。

您可能感兴趣的文章:

bootstrap datetimepicker2.3.11时间插件使用
这篇文章主要为大家详细介绍了bootstrap datetimepicker2.3.11时间插件使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
小程序实现订单倒计时功能
这篇文章主要为大家详细介绍了小程序实现订单倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-04-04
20行js代码实现的贪吃蛇小游戏
曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用Java实现太难，现在网页制作20行代码就做成一个简单的demo了，下面这篇文章主要给大家介绍了利用20行js代码实现的贪吃蛇小游戏，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-06-06
js截取固定长度的中英文字符的简单实例
下面是自己写的一个简单的函数，用于截取固定长度的字符串，中英文都适用.若有不妥之处还请高手指正
2013-11-11
JS在if中的强制类型转换方式
大家都知道JS在很多情况下会进行强制类型转换，最常见的方式有两种，在文章均给大家提到，下面小编给大家带来了JS在if中的强制类型转换，感兴趣的朋友一起看看吧
2018-07-07
js支持键盘控制的左右切换立体式图片轮播效果代码分享
这篇文章主要介绍了js支持键盘控制的左右切换立体式图片轮播效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
Egg.js构建一个stream流式接口服务实现详解
这篇文章主要为大家介绍了Egg.js构建一个stream流式接口服务实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-09-09
JS requestVideoFrameCallback() 简单案例
这篇文章主要介绍了JS requestVideoFrameCallback()简单案例，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07
Javascript读取cookie函数代码
Javascript读取cookie函数代码，需要的朋友可以参考下。
2010-10-10
ES6新特性六：promise对象实例详解
这篇文章主要介绍了ES6新特性之promise对象,结合实例形式详细分析了promise对象的功能、状态、使用方法与相关操作技巧,需要的朋友可以参考下
2017-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具