当前位置:编程学习 > JS >>

extjs ColumnChart 设置不同的颜色

[javascript] 
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,   
           
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,