extjs ColumnChart 设置不同的颜色

Ext.onReady(function(){  
        //定义store  
    var chartStore = new Ext.data.JsonStore({  
          root:'root',  
            
          fields:[  
            {name:'ne',type:'string'},//网元  
            {name:'confine',type:'int'},//阀值  
            {name:'bill',type:'string'}//工单数  
          ],  
          sortInfo:{field: 'bill', direction: 'ASC'}  
        });  
  
    //测试数据  
    var obj={  
            root:[  
              {ne:'网元一',confine:80,bill:150},  
              {ne:'网元二',confine:150,bill:140},  
              {ne:'网元三',confine:180,bill:160},  
              {ne:'网元五',confine:120,bill:180},  
              {ne:'网元六',confine:165,bill:13},  
              {ne:'网元七',confine:54,bill:12},  
              {ne:'网元八',confine:55,bill:44},  
              {ne:'网元九',confine:33,bill:113},  
              {ne:'网元十',confine:122,bill:77}       
            ]  
          }  
  
       
    //载入数据  
    chartStore.loadData(obj);  
    //pushlet 回调函数  
    window.onData = function (event) {  
        //alert(event.get("data1"));  
        var obj1 = eval('('+event.get("data1")+')');  
          
        //obj=obj1;  
          
        //chartStore.loadData(obj);  
    }  
    // 系统属性定义列数据模型  
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),  
        {header:'网元',dataIndex:'ne'},  
        {header:'工单量',dataIndex:'bill',renderer:function(value, cellMeta, record, rowIndex, columnIndex, store){  
            var confine = record.data['confine'];   
            /*if(value>=confine){ 
                //cellMeta.css='x-grid-back-red'; 
                var row = cm.findColumnIndex(rowIndex); 
                row.css='x-grid-back-red'; 
            }*/  
              
              
            return value;  
        }},  
        {header:'阀值',dataIndex:'confine'}  
        //{header:'操作',dataIndex:'state',renderer:renderOperate}  
    ]);  
    var grid = new Ext.grid.EditorGridPanel({  
        title:'工单积压监控统计',  
        cm:cm,  
        store:chartStore,  
        sm : new Ext.grid.RowSelectionModel({  
            singleSelect : true  
        }),  
        stripeRows:true,  
        loadMask:true,  
        clicksToEdit : 2,//双击触发,  
        enableColumnMove : false,  
        trackMouseOver : false,  
        stripeRows:true,  
        frame:true,  
          
        loadMask:{  
            msg:"数据加载中....."  
        },  
        viewConfig:{  
            forceFit:true,  
            columnsText:'显示列',  
            scrollOffset:25,  
            sortAscText:'升序',  
            sortDescText:'降序'  
        },  
        autoExpandColumn:'desc',  
        bbar:new Ext.PagingToolbar({  
            pageSize:24,  
            store:chartStore,  
            displayInfo:true,  
            displayMsg:'显示第 {0} 条到第 {1} 条记录,总共 {2} 条',  
            emptyMsg:'无记录'  
              
        }),  
        viewConfig:{forceFit:true,sortAscText:'正序',sortDescText:'降序',  
            getRowClass : function(record,rowIndex,rowParams,store){   
                if(record.data.bill>=record.data.confine){  
                    return 'x-grid-back-red';  
                }  
                  
            }  
        }  
  
    });  
   
   var linechart = new Ext.chart.LineChart({  
        title:'工单积压图表',    
        xtype:'linechart',  
        url: AIUPP_ROOT+'/css/resources/charts.swf',  
        store:chartStore,  
        //xField: 'label',  
        //yField:'alarmCount',  
        //定义tip内容  
        tipRenderer : function(chart, record){  
           //alert(record.get('startTime'));  
           var ne = record.get('ne');  
           var str = String.format('网元:{0}\n工单量:{1}\n阀值:{2}',ne,record.get('bill'),record.get('confine'))  
            return str;  
         },  
         //定义两个图表,一个是柱状图,一个是折线图  
         series: [{  
            type: 'column',  
            displayName: '工单个数',  
            id:"billId",  
            xField: 'ne',  
            yField: 'bill',  
            style: {  
                color:0x99BBE8,  
                size: 20  
            }  
        },{  
                type:'column',  
                displayName: '阀值',  
                xField: 'ne',  
                yField: 'confine',  
                style: {  
                  color: '#ff0000',  
                   size: 20  
                }  
            }],  
            listeners:{  
                "show":function(){  
                        var c = linechart.series;  
                        //alert(c[1].store);  
                        //c[1].style.color='#00ff00';  
                          
                    }  
                },  
            //定义图表样式  
            chartStyle: {  
                
              legend:{  
                display: "top"  
              },  
              xAxis: {  
                color: 0x69aBc8,  
                majorTicks: {color: 0x69aBc8, length:4},  
                minorTicks: {color: 0x69aBc8, length: 2},  
                majorGridLines:{size: 1, color: 0xeeeeee}  
              },  
              yAxis: {  
                color: 0x69aBc8,  
                majorTicks: {color: 0x69aBc8, length: 4},  
                minorTicks: {color: 0x69aBc8, length: 2},  
                majorGridLines: {size: 1, color: 0xdfe8f6}  
              }  
            }  
            
   });  
     
    var contentPanel = new Ext.TabPanel({       
        region:'center',       
        enableTabScroll:true,       
        activeTab:0,   
        closable:false,  
        split : false,  
       collapsible : false,  
        layoutOnTabChange:true,  
        items:[linechart,grid]      
         
   });  
      
      
    // 间隔时间  
    var interval = new Ext.form.TextField({  
        name:'interval',  
        fieldLabel:'间隔时间',  
        id:"searchInterval"  
          
    });  
    // 分组方式  
    var groupType = new Ext.form.RadioGroup({  
        name:'groupType',  
        fieldLabel:'分组方式',  
        id:"searchGroupType",  
        items:[  
            new Ext.form.Radio({  
                name:"groupType",  
                inputValue:"1",  
                boxLabel:"地区"  
            }),  
            new Ext.form.Radio({  
                name:"groupType",  
                inputValue:"2",  
                boxLabel:"地区+网元"  
            }),  
            new Ext.form.Radio({  
                name:"groupType",  
                inputValue:"3",  
                boxLabel:"地区+网元+业务代码"  
            })  
        ]  
    });  
    // 开始按钮  
    var startBtn = new Ext.Button({  
        text:'开始',  
        minWidth:80,  
        handler:function(){  
            //store.load();  
        }  
    });  
    // 停止按钮  
    var stopBtn = new Ext.Button({  
        text:'停止',  
        minWidth:80,  
        handler:function(){  
            //store.load();  
        }  
    });  
    var searchPanel = new Ext.form.FormPanel({  
        labelAlign:'left',  
        labelWidth:60,  
        frame:true,  
        layout:'column',  
        items:[  
            {columnWidth:.28,layout:'form',items:[interval]},  
            {columnWidth:.38,layout:'form',items:[groupType]},  
            {columnWidth:.10,layout:'form',items:[startBtn]},  
            {columnWidth:.16,layout:'form',items:[stopBtn]}  
        ]  
    });  
    var vp = new Ext.Viewport({  
        layout:'border',  
        border:false,  
        hideBorders:true,  
        bufferResize:100,  
        items:[  
            //{region:'north',title:'::监控条件',autoHeight:true,margins:'5 5 10 5',collapsible:true,items:[searchPanel]},  
            {region:'center',layout:'fit',margins:'5 5 5 5',items:[contentPanel]}  
        ]  
    });  
      
    vp.show();  
});  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值