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

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();//不跳转






        }
}
发表于 2013-03-08 17:01 杨军威 阅读(631) 评论(2)  编辑  收藏




评论
# re: extjs和highcharts整合显示数据曲线和打印图片
没看到打印是那一块啊
lln 评论于 2013-05-10 10:47  回复  更多评论
# re: extjs和highcharts整合显示数据曲线和打印图片
@lln
@lln
@lln
现在有导出图片的方法了