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

现在有导出图片的方法了