博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Extjs4.0 Chart属性中文解释
阅读量:6441 次
发布时间:2019-06-23

本文共 3030 字,大约阅读时间需要 10 分钟。

hot3.png

1. Ext.onReady(function () {  2.     var win = Ext.create('Ext.Window', {  3.         width: 800,  4.         height: 600,  5.         hidden: false,  6.         maximizable: true,  7.         title: '柱状图',  8.         renderTo: Ext.getBody(),  9.         layout: 'fit',  10.         tbar: [{  11.             text: 'Reload Data',  12.             handler: function() {  13.                 store1.loadData(generateData());  14.             }  15.         }],  16.         items: {  17.             id: 'chartCmp',  18.             xtype: 'chart',  19.             style: 'background:#000',  20.             animate: true,  21.             shadow: true,  22.             store: store1,  23.             axes: [{  24.                 type: 'Numeric',  25.                 position: 'left',  26.                 fields: ['data1'],  27.                 label: {  28.                     renderer: Ext.util.Format.numberRenderer('0,0')  29.                 },  30.                 title: 'Number',  31.                 grid: true,  32.                 minimum: 0  33.             }, {  34.                 type: 'Category',  35.                 position: 'bottom',  36.                 fields: ['name'],  37.                 title: 'Month'  38.             }],  39.             series: [{  40.                 type: 'column',  41.                 axis: 'left',  42.                 highlight: true,  43.                 tips: {  44.                   trackMouse: true,  45.                   width: 140,  46.                   height: 28,  47.                   renderer: function(storeItem, item) {  48.                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '$' );  49.                   }  50.                 },  51.                 label: {  52.                   display: 'insideEnd',  53.                   'text-anchor': 'middle',  54.                     field: 'data1',  55.                     renderer: Ext.util.Format.numberRenderer('0'),  56.                     orientation: 'vertical',  57.                     color: '#333'  58.                 },  59.                 xField: 'name',  60.                 yField: 'data1'  61.             }]  62.         }  63.     });  64. });

axes:用来配置坐标,可以配置多个坐标。

type:配置坐标的类型。一般用到的是NumericCategory

position:配置坐标的位置,比如:上下左右

fields:可以配置多个字段,用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的

label:可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数

              label: {

                    rotate: {
                        degrees: 315
                    }
                }

title:配置坐标需要显示的title

grid:设定网格的样式。比如设定网格的透明度、样式等。

           grid: { // 设定网格颜色值

                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                }

minimum:可以配置坐标的最小值。当然会有对应的最大值maximum。可以配合使用majorTickSteps(主刻度,配置总共有多少个刻度)minorTickSteps(次刻度,在每个主可短中画次刻度。比如配置10,则数字没增加10,会话一个次刻度)

series:用来配置图表

type:配置图表的类型,图表有很多类型。每个图表都有各自独特的配置项

axis:相对于哪个坐标。因为坐标有多个,图表的高度,总的有个参照。

highlight:设置鼠标移动到图表上面,是否高亮。不过这个反应很慢。

tips:设置鼠标移动到图表上时的提示信息

label:设置图表上显示的文字。可以设置文字的位置、样式。但不是每个图表都有这个配置项。

xField:设定x坐标绑定的字段。因为axes设定了坐标的值,所以这个字段绑定的值必须在axes的坐标值中。

yField:设定y坐标绑定的字段。

转载于:https://my.oschina.net/aspireto/blog/266103

你可能感兴趣的文章
阿里云重磅推出物联网设备身份认证Link ID²
查看>>
作为数据科学家,我都有哪些弱点?
查看>>
JavaScript数据精度缺失问题
查看>>
百度开源情感分析Senta,让你更懂用户
查看>>
Java 几种线程状态之间的相互关系
查看>>
刷面试题之<<携程 地面业务 前端面试经历>>
查看>>
Python--Redis实战:第二章:使用Redis构建Web应用:第一节:登录和cookie缓存
查看>>
javascript中indexOf与search的区别(详解)
查看>>
利用svg页面高斯模糊
查看>>
mybatis模仿1之我先看看
查看>>
记一次小程序之旅
查看>>
【跃迁之路】【539天】刻意练习系列298(2018.07.29)
查看>>
撸个简单的MVVM框架
查看>>
css3 动画(三)animation 简介
查看>>
JavaScript大师必须掌握的12个知识点
查看>>
链表 LeetCode19 删除链表的倒数第 n 个节点
查看>>
ARM | STM32F10xxx课堂学习笔记(时钟 & 高级控制定时器)
查看>>
RocketMQ源码分析之RocketMQ事务消息实现原理上篇(二阶段提交)
查看>>
Sublime Configuration
查看>>
Docker网络
查看>>