java学习

java学习

 

extjs和highcharts整合显示数据曲线和打印图片

Ext.namespace('Ext.ux');

Ext.ux.WaterRealtimeDisplayPanel = function(treeNode, panelId, config) {
    this.treeNode = treeNode;
    this.panelId = panelId;
    var series=[{"name":"实时数据显示","data":[]}];
    
    var temhum = new Ext.form.ComboBox({
        name : 'temhunm',
        fieldLabel : '状态',
        allowBlank : false,
        blankText : '请选择温湿度',
        editable : false,
        triggerAction : 'all',//all表示把下拉框列表框的列表值全部显示出来
        store : new Ext.data.ArrayStore({
            fields : [ 'name', 'value' ],
            data : [ [ '温度', '1' ], [ '湿度', '2' ] ]
        }),
        mode : 'local',
        displayField : 'name',
        valueField : 'value',
        width : 60
    });
    var storeProvince = new Ext.data.JsonStore({   
        autoLoad:true,   
        url : path+"/wenshi/getnode",   
        root : "options",   
        fields : [ {   
            name : 'name'  
        }]
    });
    var nodeCtl = new Ext.form.ComboBox({
        fieldLabel : '节点',
        allowBlank : false,
        blankText : '请选择节点',
        editable : false,
        triggerAction : 'all',
        store : storeProvince,
        mode : 'local',
        displayField : 'name',
        valueField : 'name',
        width : 140
    });
    var stTime = new Ext.form.DateField({
                fieldLabel    : '选择时间',
                allowBlank    : false,
                emptyText    : '请选择开始日期',
                editable    : false,
                format        : 'Y-m-d',
                maxValue    : new Date(),
                width        : 130
            });
    var data = [
        ['y','年'],
        ['m','月'],
        ['d','日']
      //  ['w','周']
    ];

    var store = new Ext.data.SimpleStore({
        fields: ['value', 'text'],
        data: data
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        fieldLabel:"请选择时间对应的类型",
        emptyText: '请选择筛选类型',
        mode: 'local',
        triggerAction : 'all',
        valueField: 'value',
        displayField: 'text'
    });
    Ext.ux.WaterRealtimeDisplayPanel.superclass.constructor.call(this, {
                id : this.panelId,
                title : this.treeNode.text,
                closable : true,
                autoScroll : true,
                height : 400,
                items:[
                    {  
                layout:'column',  
                border:false,  
                items:[{  
                //columnWidth: .25 ,  
                layout:'form',  
                border:false,  
                labelAlign:'right',  
                width : 200,  
                labelWidth:40,  
                items:[
temhum,  nodeCtl]  
                }
                ,{  
                    layout:'form',  
                    width : 200,  
                    labelWidth:60,  
                    border:false,  
                    labelAlign:'left',  
                    items:[stTime]  
                },//combo
                combo
                ,
                {    
                    layout:'form',  
                    border:false,  
                    scope:this,  
                    items:[{  
                        xtype:'button',  
                        border:false,
                        width:70,
                        style:"margin-left:10px",
                        text:'查询',  
                        scope:this,  
                        handler:function(){
                            
                            // 获取表单对象  
                            var _params_ = this.getForm().getValues(false);    
                            var nodeid = nodeCtl.getValue();//获取节点id
                            var checktype=combo.getValue();//选择的筛选类型
                            var checktime=stTime.getValue();//获取时间的值
                            var th = temhum.getValue();
                            if (th == undefined || th == ''){
                                Ext.Msg.alert("提示","节点不能为空");
                                return;
                            }
                            if (nodeid == undefined || nodeid == ''){
                                Ext.Msg.alert("提示","节点不能为空");
                                return;
                            }
                            if(!stTime.isValid()){
                                Ext.Msg.alert('信息', '时间为必选项');    
                                return;
                            }                          
                            if (checktype == undefined || checktype == ''){
                                Ext.Msg.alert("提示","筛选类型不能为空");
                                return;
                            }
                            // 获得统计【就是显示的那个图】 配置文件对象  
                            var _op_ = this.getOptions();
                            
                            //首先从后台获得x轴上值
                            var categories=_op_.xAxis.categories;
                            categories=[];
                            $.ajax({  
                                    type:"POST",  // 提交方式  
                                    url:path+'/wenshi/collectHositoryDataName', // 提交地址         
                                    dataType:"json", // 解释格式  
                                    data:{"nodeid":nodeid,"checktime":checktime.format('Y-m-d'),"checktype":checktype,"th":th},     // 请求参数  
                                    success:function(iJson){  
                                        var results = eval(iJson); // 转换成 JSON 数据  
                                   var r = results[0].data;
                                 for(var i=0;i<r.length;i++){
                                     categories.push(r[i]);
                                 }
                                    
                                        _op_.xAxis.categories=categories;
                                     },  
                                    error:function(){  
                                        Ext.Msg.alert('系统操作','网络不通畅或数据格式不对!');  
                                    }  
                            });
                           
                            // 获得统计 对象的 数据
                            var _series_ = _op_.series;                             
                            // 清空 统计 对象的 数据 重新加载                              
                            _series_ = [] ;  
                            // 创建一个统计 对象胡方法   
                            var _createChart_ = function (obj){new Highcharts.Chart(obj);};  
                            // 向后台发送请求   
                        var d = new Ext.util.DelayedTask(function(){  
                             $.ajax({  
                                    type:"POST",  // 提交方式  
                                    url:path+'/wenshi/collectHositoryData', // 提交地址         
                                    dataType:"json", // 解释格式  
                                    data:{"nodeid":nodeid,"checktime":checktime.format('Y-m-d'),"checktype":checktype,"th":th},     // 请求参数  
                                    success:function(iJson){  
                                        var results = eval(iJson); // 转换成 JSON 数据  
                                        for(var i =0 ; i < results.length;i++){  // 解释和装载数据   
                                            _series_.push({name:results[i].name,data:results[i].data});  
                                        }  
                                        _op_.series = _series_; // 赋值   
                                        _createChart_(_op_);  // 重新创建一个统计  
                                     },  
                                    error:function(){  
                                        Ext.Msg.alert('系统操作','网络不通畅或数据格式不对!');  
                                    }  
                            });
                         });  
                         d.delay(1000);
                        }  
                    }]  
                }]  
            },
            {  
                xtype:'panel',  // 创建  Highcharts  所依赖的 div   
                html:'<div id="'+"test"+'" style="width:1000px; height: 500px; margin: 0 auto"></div>'  
            }
                    ],
                listeners : {
                    activate : function(p) {
                          var obj=this.getOptions();
                          obj.series=series;
                          var chart =new Highcharts.Chart(obj);
                    }
                },
                getOptions:function(){
                    return     {
                                    chart : {
                                        renderTo :"test",
                                          type: 'spline'
                                    },
                                    lang : {
                                        exportButtonTitle : '导出图表',
                                        printButtonTitle : '打印报表'
                                    },
                                    title : {
                                        text : '节点历史参数曲线图'
                                    },
                                    xAxis : {
                                        title : {
                                            text : '采集时间'
                                        }
                                       ,
                                        //categories : ['1秒', '2秒','3秒']//设置x轴上分类名称
                                    },
                                    yAxis : {
                                        title : {
                                            text : '节点参数值'
                                        },
                                        plotLines: [{  
                                              value: 0,  
                                              width: 1,  
                                              color: '#808080'  
                                             }]
                                    },
                                    tooltip: {  
                                                //enabled: false,  //是否显示提示框
                                                formatter: function() {  
                                                        return "时间:"+this.x +'<br/>'+"参数值:"+ this.y;
                                                }  
                                          }
                                    //,
//                                   series : [{
//                                                name : '实时数据显示',
//                                                data : [141, 100, 4]
//                                            }]
                                };
                }
            });
};
Ext.extend(Ext.ux.WaterRealtimeDisplayPanel, Ext.FormPanel, {
});
Ext.reg('ljsStudentTuPanel', Ext.ux.WaterRealtimeDisplayPanel);


后台导出图片的方法是:
public class ImageController extends Controller{

    public void index(){
        
        String type = getPara("type");
        String svg =getPara("svg");
        String filename = getPara("filename");
        ServletOutputStream out1 =  null;
        try {
            filename = filename==null?"chart":filename;
             out1 = getResponse().getOutputStream();
            if (null != type && null != svg) {
                svg = svg.replaceAll(":rect", "rect");
                String ext = "";
                Transcoder t = null;
                if (type.equals("image/png")) {
                    ext = "png";
                    t = new PNGTranscoder();
                } else if (type.equals("image/jpeg")) {
                    ext = "jpg";
                    t = new JPEGTranscoder();
                } else if(type.equals("image/svg+xml")) {
                      ext = "svg";
                }else if(type.equals("application/pdf")){
                    t = new PDFTranscoder();
                    ext = "pdf";
                }
                    
                getResponse().addHeader("Content-Disposition", "attachment; filename="+ filename + "."+ext);
                getResponse().addHeader("Content-Type", type);
                
                if (null != t) {
                    TranscoderInput input = new TranscoderInput(new StringReader(svg));
                    TranscoderOutput output = new TranscoderOutput(out1);                    
                    try {
                        t.transcode(input, output);
                    } catch (TranscoderException e) {
                        out1.print("Problem transcoding stream. See the web logs for more details.");
                        e.printStackTrace();
                    }
                } else if (ext.equals("svg")) {
                    OutputStreamWriter writer = new OutputStreamWriter(out1, "UTF-8");
                    writer.append(svg);
                    writer.flush();
                    writer.close();
                } else
                    out1.print("Invalid type: " + type);
            } else {
                //getResponse().addHeader("Content-Type", "text/html");
               // out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
               //         "\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
            }
            
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            try {
                out1.flush();
                getResponse().flushBuffer();
                out1.close();
                
            } catch (Exception e2) {
            
            }
            
        }
        
        renderNull();//不跳转
        
        

        }
}

posted on 2013-03-08 17:01 杨军威 阅读(3393) 评论(2)  编辑  收藏

评论

# re: extjs和highcharts整合显示数据曲线和打印图片 2013-05-10 10:47 lln

没看到打印是那一块啊  回复  更多评论   

# re: extjs和highcharts整合显示数据曲线和打印图片 2013-05-27 17:34 杨军威

@lln
@lln
@lln
现在有导出图片的方法了  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜