extjs 曲線圖表


1.構建數據源

     //數據源(此處是靜態數據)
     var data = [
        [' '..........],
        [' '..........]
        ];
        var TBstore = new Ext.data.ArrayStore({
            data:data,
            fields: [
                {name:'YEARSMONTH'},
                {name:'SHIJICHUKU'},
                {name:'SHIJICAIGOU'},
                {name:'MONICAIGOU'}
            ]
        });

2.構建面板

        var pn_TongBi =new Ext.Panel({
            layout:'fit',
            items: {
                xtype: 'linechart',    //線型圖
                store: TBstore,
                xField: 'YEARSMONTH',
                //yField: 'visits',
                series: [{//
                    type: "line", 
                    displayName: "實際出庫",
                    yField: "SHIJICHUKU",
                    style: {
                        color:'6FD52B'
                    }
                   },
                   {
                    type: "line", 
                    displayName: "實際采購",
                    yField: "SHIJICAIGOU",
                    style: {
                        color:'E5F906'
                    }
                   },
                   {
                    type: "line", 
                    displayName: "模擬采購",
                    yField: "MONICAIGOU",
                    style: {
                        color:'F9060E'
                    }                               
                   }
                                               
                ]                
            }
        });            
        
        var win_TongBi = new Ext.Window({
            modal: true,
            title:'同比',
            closable: true,
            layout: "fit",
            closeAction: 'hide',
            width: 800,
            resizable: false,
            autoScroll: true,
            height: 430,
            resizable: false,
            items: [pn_TongBi]
        });          
        
        win_TongBi.show();   

3.最終效果

圖一

圖二


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM