高图表:“全部打印”按钮

Highcharts: "Print all" button

本文关键字：全部打印 按钮 打印 全部 高图表      更新时间：2023-09-26

是否可以为打印多个图表的高图表创建"全部打印"按钮？

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

exportChart 方法接受参数，因此您可以向其发送多个图表。但是，打印方法不接受任何参数。因此，要打印，您必须单独指定每个图表，例如 chart1.print（）;和图表2.打印（）;分别打印它们。

有两种解决方法：

    打印

  1. 整个页面而不使用Highcharts打印。下面是一个示例。

  2. 您可以将两个图表导出到 pdf 文件，然后在那里打印表单。 下面是如何将多个图表导出到一个pdf的示例。

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