Highcharts：“打印全部”按钮答案

【问题标题】：Highcharts: "Print all" buttonHighcharts：“打印全部”按钮
【发布时间】：2012-06-22 23:14:10
【问题描述】：

是否可以为 Highcharts 创建一个“打印全部”按钮，其中打印多个图表？

我知道可以导出多个图表，如 jFiddle 中所示：http://jsfiddle.net/highcharts/gd7bB/1/ 但我不确定 Highcharts 是否允许使用类似的打印方法。

【问题讨论】：

标签： javascript jquery printing highcharts

【解决方案1】：

这是一种直接进行打印的替代解决方案。它基于 chart.print() 函数，但它适用于多个图表。

在此处查看演示：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);
        }
    });

【讨论】：

我会研究一下，但从我在 jsFiddle 中看到的看起来不错！
Highcharts 删除了文件，你可以用这个代替第一个链接更好jsfiddle.net/q5Rzu/147
你能帮帮我吗？我想一次打印 5 个图表。但我想在第一页的顶部给出一个标题。该怎么做？

【解决方案2】：

exportChart 方法接受参数，因此您可以发送多个图表。但是，打印方法不接受任何参数。因此，要打印，您必须分别指定每个图表，如 chart1.print();和chart2.print();分别打印它们。

有两种解决方法：

在不使用 Highcharts 打印的情况下打印整个页面。这是example。
您可以将两个图表都导出为 pdf 文件，然后在那里打印表格。这是一个关于如何export multiple charts to one pdf的示例。

【讨论】：

感谢您的回答。这在 jFiddle 中有效，但在我的页面上，它不仅打印图表，还打印页面上的所有其他内容。我想我可以使用打印 CSS 来解决问题，但是有没有办法只打印图表？
如果无法从客户端打印多个图表，这就是我打算使用的。我暂时保留这个问题，以防有人有不同的解决方案。
exportChart 方法接受参数，因此您可以发送多个图表。但是，print 方法不接受任何参数。因此，要打印，您必须分别指定每个图表，如 chart1.print(); 和 chart2.print(); 分别打印它们。我给你的第一个答案没有使用 highcharts 打印并忽略了参数。这就是它打印整页的原因。
谢谢，这就是我阅读 Highcharts 文档时的想法。我会将此信息放入您的回答中并接受它。