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


Posted in Javascript onMarch 06, 2020

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

这篇文章将介绍extjs中自带的饼图。

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

代码如下:

Ext.define('ChartPieTest', {
  extend: 'Ext.panel.Panel',
  autoScroll : true,
  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],
    });
 
    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',
      insetPadding: 40,
      animate : true,// 是否支持动态数据变化
      legend: {// 图例
        position: "right",
        spacing: 12,
        padding: 5,
        font: {
          name: 'Tahoma',
          color: '#3366FF',
          size: 12,
          bold: true
        }
      },
      store:me.store,
      //axes:me.createAxes(),
      series:me.createSeries(),
    }
  },
  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
        }
      },*/
     //自己模拟数据
      fields: ['name', 'data'],
      data: [
        { 'name': '中年人',  'data': 10 },
        { 'name': '婴儿',  'data': 7 },
        { 'name': '老年人', 'data': 5 },
        { 'name': '小孩', 'data': 2 },
        { 'name': '青少年', 'data': 27 }
      ],
      autoLoad: true
    });
  },
  
  createSeries: function () {
    var me = this;
    var columns = [
      {
        type: 'pie',
        angleField: 'data',
        showInLegend: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 40,
          renderer: function(storeItem, item) {
            // calculate and display percentage on hover
            var total = 0;
            me.store.each(function(rec) {
              total += rec.get('data');
            });
            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
          }
        },
        highlight: {
          segment: {
            margin: 5
          }
        },
        label: {
          field: 'name',
          display: 'rotate',
          contrast: true,
          font: '18px Arial'
        }
      },
 
    ];
    return columns;
  }
 
});

注:

1.上面中的createStore是创建饼图所需要的数据的--store。

2.上面中的legend 显示的右边的图例(表明哪块代表什么数据),legend中的position属性可以调节图例的位置。其中有‘left'、‘right',‘bottom'、‘top'分别代表左右下上位置。

3.showInLegend是bool值,为false的时候不显示上面的图例。

4.tips这里是当鼠标放在饼图上的时候显示的提示性文字,其中的renderer方法中可设置提示哪些内容。

5.label 设置饼图上显示文字的一些属性。其中的display属性决定文字在饼图中位置,共有‘outside'、‘rotate'两种方式,前者表示文字显示在图表的外边,后者文字显示在图表的里边。

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

Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
js日历功能对象
Jan 12 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
js中常用的Math方法总结
Jan 12 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
vue如何使用rem适配
Feb 06 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
extjs图表绘制之条形图实现方法分析
Mar 06 #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
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
js 操作符实例代码
2009/10/24 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python实现ping命令小程序
2020/12/28 Python
MySQL面试题
2014/01/12 面试题
使用索引有什么好处
2016/07/27 面试题
趣味运动会活动方案
2014/02/12 职场文书
应届生自荐信范文
2014/02/21 职场文书
向领导表决心的话
2014/03/11 职场文书
九九重阳节标语
2014/10/07 职场文书
党员个人整改措施
2014/10/24 职场文书
学生会辞职信
2015/03/02 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书