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);
后台导出图片的方法是：
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();//不跳转
}
}
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();//不跳转
}
}