Extjs学习 图表Chart 坐标轴组件详解（axes）

一个坐标配置的实例

{        
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 + ': ' + item.value);                               
            this.setTitle(storeItem.get('riqi') + ': ' + item.value);                           
         }                       
      },                       
      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']                   
    }                   
   ]  
     
 }    
}