将带有文本区域的多个highcharts的highcharts导出到多个PDF文件 [英] export multiple highcharts with text area for their highcharts to multiple PDF file
本文介绍了将带有文本区域的多个highcharts的highcharts导出到多个PDF文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将具有textarea的多个高位图导出到多个pdf文件. 如何将带有textarea的多个图表转换为多个pdf文件?
I want to export multiple highcharts with textarea to multiple pdf files. How will I convert multiple highcharts with textarea to multiple pdf files?
$(function() {
Highcharts.getSVG = function(chart, text) {
var svgArr = [],
top = 0,
width = 0,
txt;
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + text.attributes.style.value + '">' + $(text).val() + '</text>';
top += 200;
console.log(txt.indexOf('\n'))
svgArr.push(txt);
return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
Highcharts.getSVG = function(chart, text) {
var svgArr = [],
top = 0,
width = 0,
txt;
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + text.attributes.style.value + '">' + $(text).val() + '</text>';
top += 200;
console.log(txt.indexOf('\n'))
svgArr.push(txt);
return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
Highcharts.exportChartWithText = function(chart, text, options) {
// Merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Post to export server
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: Highcharts.getSVG(chart, text)
});
};
Highcharts.exportChartWithText = function(chart, text, options) {
// Merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Post to export server
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: Highcharts.getSVG(chart, text)
});
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['PreviousMonthutilizationforCPU', 'CurrentMonthUtilizationforCPU', 'Week2', 'Week2', 'Week3', 'Week4']
},
yAxis: {
min: 0,
title: {
text: 'POD'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [1, 2, 3, 3, 4]
}],
exporting: {
enabled: true
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['PreviousMonthutilizationforCPU', 'CurrentMonthUtilizationforCPU', 'Week2', 'Week2', 'Week3', 'Week4']
},
yAxis: {
min: 0,
title: {
text: 'POD'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [1, 2, 3, 3, 4]
}],
exporting: {
enabled: true
}
});
var text = document.getElementById('txt');
$("#export2pdf").click(function() {
Highcharts.exportChartWithText(chart, text, {
type: 'application/pdf',
filename: 'wow-pdf'
});
});
$("#export2pdf").click(function() {
Highcharts.exportChartWithText(chart, text, {
type: 'application/pdf',
filename: 'wow-pdf'
});
});
});
推荐答案
答案的第一部分在这里: 将多个带有自定义文本的高图表导出到pdf
First part of an answer is here: Export Multiple highcharts with custom text into pdf
要回答第二个问题，请在您的注释中提出(关于打破界限)-您需要稍微更改一下代码.您可以使用 tspan 来中断行.您还应该记住在每行中更改标签的宽度:
To answer the second question, asked in your comment (about breaking the lines) - you need to change the code a little bit. You may use tspan for breaking your lines. You should also remember about changing width of your label with every new line:
Highcharts.getSVG = function(charts, texts) {
var svgArr = [],
top = 0,
width = 0,
txt,
numberOfLines;
Highcharts.each(charts, function(chart, i) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
txt = texts[i];
value = $(txt).val().replace(/\n/g, '</tspan><tspan x="0" dy="1.2em">');
numberOfLines = $(txt).val().split("\n").length;
txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + txt.attributes.style.value + '"><tspan x="0" dy="1.2em">' + value + '</tspan></text>';
top += 1.2 * 16 * numberOfLines + 20;
svgArr.push(txt);
});
return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
http://jsfiddle.net/6m2rneL8/35/
这篇关于将带有文本区域的多个highcharts的highcharts导出到多个PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
