Highcharts：“全部打印”按钮

Question

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

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

Answer 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); 
     } 
    }); 

Answer 2

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

有两种解决方法：

1. 打印整个页面，而无需使用Highcharts打印。这是一个example。

2. 您可以将两个图表导出到PDF文件，然后在那里打印表格。这里是一个关于如何去export multiple charts to one pdf的例子。