extjs4图表绘制之折线图实现方法分析


Posted in Javascript onMarch 06, 2020

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

本篇文章将介绍extjs中自带的图表

在本次案例中,提供一下功能:

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

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

请看下面代码:

Ext.define('ChartLineTest', {
  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;//赋值给selectYear属性
            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//赋值给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: 'line',
        highlight: {
          size: 7,
          radius: 7
        },
        fill: false,
        // showInLegend:false,//要是为false 在坐标系中将不显示标记
        axis: 'left',
        xField: 'statTime',
        renderer: Ext.util.Format.dateRenderer('Y-m '),
        yField: 'activeCount',
        title :'活跃用户',
        //定义浮标(提示框) 显示想要显示的文字
        tips: {
          trackMouse: true,
          width: 200,
          height: 40,
          renderer: function(storeItem, item) {
            this.setTitle( "人数:"+storeItem.get('activeCount')+",占比:"+storeItem.get('effectiveProportion') );
          }
        },
        label: {
          display: 'insideEnd',
          field: 'activeCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',
          font:'15px Helvetica, sans-serif',
          'text-anchor': 'end',
          color:'red',
        },
        markerConfig: {
          type: 'cross',
          size: 3,
          radius: 3,
          'stroke-width': 0
        }
      },
      {
        type: 'line',
        highlight: {
          size: 7,
          radius: 7
        },
        // selectionTolerance:0,

        axis: 'left',
        title :'有效用户',
        fill: false,
        xField: 'statTime',
        renderer: Ext.util.Format.dateRenderer('Y-m '),
        yField: 'effectiveCount',

        markerConfig: {
          type: 'circle',
          size: 3,
          radius: 3,
          'stroke-width': 0
        },
        /* style: {
          color: '#6666CC'
        },*/
        style: {
          stroke: '#00ff00',
          /* 'stroke-width': 10,
          fill: '#80A080',
          opacity: 0.2*/
        },
     /*   label: {
          display: 'middle',
          field: 'effectiveCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',
          font: '15px Helvetica, sans-serif',
          'text-anchor': 'end',
          color: 'red',
          minMargin:100,
        },*/
        //定义坐标上的文字的属性
        label: {
          display: 'over',
          field: 'effectiveCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',//数值显示的方式 ‘horizontal'水平显示
          font: '15px Helvetica, sans-serif',
          'text-anchor': 'start',
          color: 'red',//字体 颜色
          //对坐标上的文字进行操作,当数值大于5000的时候显示另一种颜色
          renderer: function(value, label, storeItem, item, i, display, animate, index) {

            if (value >= 5000) {
              label.setAttributes({fill:'#080',});
              value = value;
            }
            return value;
          }
        }
      },

    ];
    return columns;
  }

});

extjs4图表绘制之折线图实现方法分析

每一个图表必须要三个组成部分: 数据(data), 轴(axes)和系列(Series)。

数据 -  是图表用来展示的信息,在Ext 中使用标准的Model 或是 Store.

 - 提供数据的来源,范围,规模和单位。组成图表的基本架构。 轴可以是笛卡尔坐标(x,y), 极性(或径向),或轨距(用于仪表盘图表的一维轴)。尽管一个结合多个类型系列的图表需要额外的轴定义,但大多数的图表还是使用一组轴。

系列- 这个属于是用于数据的图形渲染的。换句话说,就是一个图标的基本图形项目,像 线图,柱状图,栏位或饼图。一个图形可以包含多个系列。 例如: 在一个图形的中有三个线状图就包含有三个独立的线系列。

可以添加标签,标记和图例说明到图上;还可以设置动画效果或是放大某一个区块。

label(标签) -- 对一个轴或是系统的解释性标题。

marker(标记) -- 用来在一个系列中绘制数据点的一个符号,形状或是图片。

legend(说明) -- 提供图的说明,解释各变量在图形中代表的意义。(图例)

listeners(监听器)--等待某个事件并作出一些动作像鼠标事件等

animation( 动画)--  图的元素可以移动

tips(提示框)--  当鼠标放在坐标轴上显示的提示文字。

markerConfig--定义每一点坐标的形状。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
js内置对象 学习笔记
Aug 01 Javascript
jQuery链使用指南
Jan 20 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 #Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 #Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 #Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 #Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 #Javascript
javascript中可能用得到的全部的排序算法
Mar 05 #Javascript
js的Object.assign用法示例分析
Mar 05 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
PHP类型约束用法示例
2016/09/28 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php7性能提升的原因详解
2019/10/13 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python 多线程重启方法
2019/02/18 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python tornado修改log输出方式
2019/11/18 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
自我反省检讨书
2014/01/23 职场文书
银行授权委托书格式
2014/10/10 职场文书
行政二审代理词
2015/05/25 职场文书
归途列车观后感
2015/06/17 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Mysql开启外网访问
2022/05/15 MySQL