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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
表单提交验证类
2006/07/14 Javascript
lib.utf.js
2007/08/21 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python常见数制转换实例分析
2015/05/09 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
python 写一个水果忍者游戏
2021/01/13 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
交通事故协议书范本
2014/11/18 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
mysql部分操作
2021/04/05 MySQL
Python下opencv库的安装过程及问题汇总
2021/06/11 Python