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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
一个显示天气预报的程序
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
jQuery中append()方法用法实例
2015/01/08 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
js学习之----深入理解闭包
2016/11/21 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python列表推导式操作解析
2019/11/26 Python
详解Python实现进度条的4种方式
2020/01/15 Python
如何使用python代码操作git代码
2020/02/29 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
2013的个人自我评价
2013/12/26 职场文书
好的演讲稿开场白
2013/12/30 职场文书
优秀教师事迹简介
2014/02/02 职场文书
自主招生自荐信指南
2014/02/04 职场文书
保护野生动物倡议书
2014/05/16 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python