关闭

extjs4 【charts】 查阅 属性

标签: chartsextjsfunction网格headerlayout
4113人阅读 评论(0) 收藏 举报
分类:

1.配置参数

{        xtype: 'panel',        
layout: 'fit',        
title: '趋势图',        
//bodyStyle: 'background:#ffc; padding:10px;',        
height: 250, 
width: 1000,        
forceFit: true,        
//frame: true,       
items: {            
    id: 'XTYXQK_qushitu_chart',            
    xtype: 'chart',  //设置图表类型            
    //style: 'background:#000',             
    animate: true,  //开始加载时是否动画            
    shadow: true,  //加上阴影 自动创建一个Ext.Shadow,或一个字符串表示Ext.Shadow.mode影子的显示            
    store: states,//数据对象           
    legend: { position: 'top', boxStroke: 'border:0px;', labelFont: '11px Helvetica' }, //显示 柱子类型标题 或时内容的标题  默认为false  若设为true  默认position-bottom           
    //axes :轴            
    axes: [                        
        {                            
            type: 'Numeric',  //数字类型轴                            
            position: 'left', //停靠位置                           
            fields: ['huoyueyonghushu', 'crmshibaishu'], //Y轴坐标数据,会取最大值                            
            label: {    //轴上数据文本显示  比如label: { rotate: { degrees: 315} } 旋转315°                                
            renderer: Ext.util.Format.numberRenderer('0')                            },                           
            //title: 'Y坐标',                            
            minimum: 0,  //起始点数 默认0                            
            grid: true  //显示背景表格对照                        
       }, {                            
            type: 'Category',                            
            position: 'bottom',                            
            //title: '月份',                            
            fields: ['xuhao'],                            
            grid: true,                            
            label: {                               
            //rotate: {                 degrees: 315
            },                               
            renderer: function (lbl) {//这边是需求 太多了 然后少显示些X坐标轴的值得                                    
                    var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;                                    
                    var num1 = parseInt(count / 12);                                    
                    count % 2 > 0 ? num1++ : '';                                    
                    return lbl % num1 == 0 ? lbl : '';                                
                }                            
            }                        
        }                   
 ],            
series: [            //竖条 内容                        
{                        
type: 'column',                       
 axis: 'left', //指定Y轴  是左边这条                       
 highlight: true, //鼠标移上去是否高亮显示                       
 tips: {//柱条上面的tip版                            
trackMouse: true, //鼠标触发                           
 width: 140,                            
height: 28,                            
 renderer: function (storeItem, item) {//storeItem该条数据 item(x,y的值)                                           //this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));                                
    //this.setTitle(item.value[0] + ': ' + item.value[1]);                               
 this.setTitle(storeItem.get('riqi') + ': ' + item.value[1]);                           
 }                       
 },                       
 title: ['活跃用户数', 'crm失败用户数', '提速失败用户数', '带宽不足用户数'], //柱子的标题 与前面的legend 对应 若没设 则 字段名                        label: {//柱子上面的文字                            
 display: 'insideEnd',                           
 'text-anchor': 'middle',                            
field: ['huoyueyonghushu', 'crmshibaishu'],                            
renderer: function (lbl) {                                
var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;                               
 return count <= 12 ? lbl : '';                            },                           
 orientation: 'vertical', //显示方向                            
color: '#333'                        
},                        
xField: 'xuhao',                        
yField: ['huoyueyonghushu', 'crmshibaishu']                   
 }                   
 ]       
 }    
}

1.1注解:

图表的几大要素:
1、坐标:上、下、左、右。
坐标的类型,数字、分类...
坐标包含需要显示的坐标值,即绑定的字段
坐标值的样式,比如旋转、字体大小、格式
坐标的最大值、最小值、是否显示网格
坐标旁边显示的文字
2、图表:柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...
图标的类型
图表x、y轴对应的字段
图标上显示的文字,文字的样式、位置
鼠标移上去需要显示的提示信息
3、样式
4、数据
axes:用来配置坐标,可以配置多个坐标。
type:配置坐标的类型。一般用到的是Numeric、Categoryposition:配置坐标的位置,比如:上下左右fields:可以配置多个字段,用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的label:可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数label: {
rotate: {
degrees: 315
}
}title:配置坐标需要显示的titlegrid:设定网格的样式。比如设定网格的透明度、样式等。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坐标绑定的字段。




2.简单的一维charts demo 为:



 var chartGrid = Ext.create('Ext.grid.Panel',{
    	fields:['gridYear','gridNum'],
    	columns:[
    	     {header:'年份',dataIndex:'gridYear',width:100}, 
    		 {header:'申请专利',dataIndex:'gridNum',width:100}
    	]
    	
    	
    });
  	



//折线图
  	var chartnumber1 = Ext.create('Ext.chart.Chart', {
    	height:400,
        width:800,
        animate:true,
        shadow:true,
    	store:panelStore1,
    	style:'background:#fff',
    	axes:[{//坐标
    		type:'Numeric',
    		dashSize:10,//坐标轴前导航条长度
    		position:'left',
    		fields:['preStatics'],
    		minimum: mini,
    		maximum:maxi,
    		grid: {
				//奇数行
				odd : {
					opacity: 1,//不透明
					fill: '#FFFF99',//表格内的填充色
					stroke: '#FF3300',//表格线颜色
					'stroke-width': 0.5//表格线宽度
				},
				//偶数行
				even : {
					opacity: 0,//透明
					stroke: '#6600CC',//表格线颜色
					'stroke-width': 0.5//表格线宽度
				}
				},
				majorTickSteps : 20,//主区间数
				minorTickSteps : 3//副区间数
    	},
    	{
    		type:"Category",//目录坐标
    		position:"bottom",
    		fields:['name'],
    		grid:true,
            label: {
                rotate: {
                    degrees: 315//x轴 旋转 坐标的字体显示 :斜体
                }
            }
    	}
    	],
    	series:[{//序列
    		type:'line',
    		axis:'left',
    		xField:'name',//横
    		yField:"preStatics",//纵抽字段
    		highlight: {
                 size: 7,
                 radius: 7
             },
    		style: {
    	            opacity: 0.5
    	    },
    	    markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            fill: true,//填满区域
            smooth:true,
            tips: {
                trackMouse: true,
                width: 220,
                height: 60,
                layout: 'fit',
                items:[{
                	xtype:'container',
                	items:[chartGrid]
                }],
                renderer: function(storeItem, item) {////storeItem该条数据 item(x,y的值) 
                   var storeItem = item.storeItem
                   var gridStore = chartGrid.store;
                   var data  = [{
                	   				'gridYear' :storeItem.get('name'),
                	   				'gridNum' :storeItem.get('preStatics')
                               }]
                   	gridStore.loadData(data)	
                    //this.setTitle("年"+storeItem.get('name')+'专利数'+storeItem.get('preStatics'));
                }
            }
    	}]
    })


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:636704次
    • 积分:7412
    • 等级:
    • 排名:第3050名
    • 原创:240篇
    • 转载:20篇
    • 译文:0篇
    • 评论:40条
    最新评论