javascript Highcharts：“全部打印”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11125969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts: "Print all" button
提问by The Jakester
Is it possible to create a "Print all" button for Highcharts, where more that one chart is printed?
是否可以为 Highcharts 创建一个“全部打印”按钮，在其中打印多个图表？
I know that exporting multiple charts is possible, as demonstrated in the jFiddle: http://jsfiddle.net/highcharts/gd7bB/1/but I'm not sure Highcharts allows a similar method with printing.
我知道可以导出多个图表，如 jFiddle 所示：http: //jsfiddle.net/highcharts/gd7bB/1/但我不确定 Highcharts 是否允许使用类似的打印方法。
采纳答案by jim31415
Here is an alternative solution that does the printing directly. It's based on the chart.print()function, but it works on multiple charts.
这是直接进行打印的替代解决方案。它基于chart.print()函数，但它适用于多个图表。
See the demohere: http://jsfiddle.net/jim31415/q5Rzu/150/
在此处查看演示：http: //jsfiddle.net/jim31415/q5Rzu/150/
//--------------------------------------------------------------------
$("#print").click(function () {
printCharts([chart1, chart2, chart3]);
});
//--------------------------------------------------------------------
function printCharts(charts) {
var origDisplay = [],
origParent = [],
body = document.body,
childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
// put the charts back in
$.each(charts, function (i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function () {
// put the charts back in
$.each(charts, function (i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[i];
}
});
}, 500);
}
});
回答by Linger
The exportChart method accepts parameters so you can send it more than one chart. However, the print method does not accept any parameters. So, to print you have to specify each chart separately like chart1.print(); and chart2.print(); which prints them each separately.
exportChart 方法接受参数，因此您可以将多个图表发送给它。但是，print 方法不接受任何参数。因此，要打印，您必须分别指定每个图表，如 chart1.print(); 和 chart2.print(); 分别打印它们。
There are two workarounds:
有两种解决方法：
Printing the whole page without using Highcharts printing. Here is an example.
You could export both of the charts to a pdf file and then print form there. Here is an example on how to export multiple charts to one pdf.
无需使用 Highcharts 打印即可打印整页。这是一个例子。
您可以将两个图表导出为 pdf 文件，然后在那里打印表格。这是有关如何将多个图表导出为一个 pdf的示例。
