全部实现代码
1.javascript
function showJianBao(node){
var top = getTop(node)+30;
var elem = document.getElementById("createJB").innerHTML;
jbboxy = new Boxy(elem, {
title:'生成简报',
fixed:false,
type:top
});
}
function exportPdf(){
var val = '';
var expValue = document.getElementsByName("export_type");
for(var i = 0; i < expValue.length;i++){
if(expValue[i].checked){
val = expValue[i].value;
break;
}
}
jbboxy.setContent("<div style=\"width:410px;height:50px;background-color:#fff;text-align:center;padding:25px 15px;\">正在导出。。。</div>");
//获取曲线数据
getData(val);
}
function getData(type){
$.ajax({
url:'xxx.php',
type:'GET',
dataTYpe:'text',
success:function(data){
var da = data.split("|");
var len = parseInt(da[0].split(",").length/5);
//画曲线
drawlHighCharts(da[0],da[1],da[2],da[3],len,pdfname,type);
var date = new Date();
var pdfname = date.getFullYear()+''+(date.getMonth()+1)+''+date.getDate()+''+date.getHours()+''+date.getMinutes()+''+date.getSeconds();
setTimeout(function(){
//获取曲线图片
getHighCharts(pdfname,type);
},1000);
}
});
}
function drawlHighCharts(fdate,sdate,ydata,bdata,len){
Highcharts.setOptions({
colors: ['#45A43E', '#BF0A0A']
});
var chart = new Highcharts.Chart({
chart: {
renderTo: "jianbao",
type: 'spline',
marginBottom:30
},
title: {
text: ''
},
xAxis: {
categories: eval(fdate),
// tickInterval:6,
labels: {
step:len,
rotation: -10,
align: 'right',
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min:0,
gridLineColor: "#f5f5f5"
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
marker: {
enabled: false
}
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : 10,
y : 30,
borderWidth : 1,
enabled : false
},
series: [{
name: '预警',
data: eval(ydata)
}, {
name: '报警',
data: eval(bdata)
}]
});
}
function getHighCharts(pdf,type){
var svg = $("#jianbao > div").html(); //document.getElementById("highcharts-4").innerHTML;
$.ajax({
url:'xxx.php',
type:'POST',
data:{svg:svg,name:pdf},
dataType:'text',
success:function(data){
if(data == '1'){
//导出图片到PDF
exportImage(type,pdf);
}
}
});
}
function exportImage(val,pdfname){
$.ajax({
url:'xxx.php',
type:'GET',
dataType:'text',
success:function(data){
if(data == '0'){
jbboxy.setContent("<div style=\"width:410px;height:50px;background-color:#fff;text-align:center;padding:25px 15px;\"><a href='xxx.php'>"+pdfname+".pdf</a></br><a href='xxx.php'>下载PDF</a></div>");
}
}
});
}