javascript - Highcharts：“打印全部”按钮

Question

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

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

Answer 1

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

有两种解决方法：

1. 在不使用 Highcharts 打印的情况下打印整个页面。这是一个例子。

2. 您可以将两个图表都导出为 pdf 文件，然后在那里打印表格。这是一个关于如何将多个图表导出到一个 pdf的示例。

Answer 2

这是直接进行打印的替代解决方案。它基于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);
        }
    });