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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
jquery.validate使用详解
Jun 02 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
怎么使 Mysql 数据同步
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python如何重载模块实例解析
2018/01/25 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python 5个顶级异步框架推荐
2020/09/09 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
历史学专业推荐信
2013/11/06 职场文书
保密协议书范本
2014/04/22 职场文书
财政局长个人总结
2015/03/04 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
小学数学教学随笔
2015/08/14 职场文书
python自动化测试之Selenium详解
2022/03/13 Python