Highcharts：“全部打印”按键 [英] Highcharts: "Print all" button

问题描述

我知道导出多个图表是可能的，因为可以为Highcharts创建一个全部打印按钮，在那里打印更多的图表在jFiddle中演示： http://jsfiddle.net/highcharts/gd7bB/1/ ，但我不确定Highcharts允许使用类似的方法进行打印。

解决方案

这是另一种直接进行打印的解决方案。它基于 chart.print（）函数，但可用于多个图表。

请参阅演示这里： http://jsfiddle.net/jim31415/q5Rzu/150/

  // ---------------------------- ---------------------------------------- 
 $（＃print ）.click（function（）{
 printCharts（[chart1，chart2，chart3]）; 
}）; 
 
 
 // ------------------------------------ -------------------------------- 
函数printCharts（图表）{
 
 var origDisplay = []，
 origParent = []，
 body = document.body，
 childNodes = body.childNodes; 
 
 //隐藏所有内容
 Highcharts.each（childNodes，function（node，i）{
 if（node.nodeType === 1）{
 origDisplay [i] = node.style.display; 
 node.style.display =none; 
} 
}）; 
 
 //将图表放回
 $ .each（图表，函数（i，图表）{
 origParent [i] = chart.container.parentNode; 
 body.appendChild（chart.container）; 
}）; 
 
 //打印
 window.print（）; 
 
 //允许浏览器在恢复之前准备
 setTimeout（function（）{
 //将图表放回
 $ .each（图表，函数（ i，chart）{
 origParent [i] .appendChild（chart.container）; 
}）; 
 
 //恢复全部内容
 Highcharts.each childNodes，function（node，i）{
 if（node.nodeType === 1）{
 node.style.display = origDisplay [i]; 
} 
}） ; 
}，500）; 
} 
}）; 
  

Is it possible to create a "Print all" button for Highcharts, where more that one chart is printed?

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.

解决方案

Here is an alternative solution that does the printing directly. It's based on the chart.print() function, but it works on multiple charts.

See the demo here: 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);
        }
    });

这篇关于Highcharts：“全部打印”按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！