Highcharts：「全部打印」按鈕

是否可以爲Highcharts創建一個「全部打印」按鈕，在那裏打印多個圖表？Highcharts：「全部打印」按鈕

我知道可以導出多個圖表，如jFiddle所示：http://jsfiddle.net/highcharts/gd7bB/1/但我不確定Highcharts是否允許使用類似的打印方法。

2012-06-20 The Jakester

這是另一種直接進行打印的解決方案。它基於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); 
     } 
    });

來源

2012-06-21 14:05:27 jim31415

我會研究它，但從我在jsFiddle中看到的看起來很好！ –

Highcharts刪除了這些文件，你可以用這個代替第一個鏈接更好http://jsfiddle.net/q5Rzu/147/ – fcortes

你能幫我嗎？我想一次打印5個圖表。但我想在第一頁的頂部給出一個標題。怎麼做？ –

exportChart方法接受參數，因此您可以將它發送給多個圖表。但是，打印方法不接受任何參數。因此，要打印，您必須分別指定每個圖表，如chart1.print（）;和chart2.print（）;它們分別打印它們。

有兩種解決方法：

打印整個頁面，而無需使用Highcharts打印。這是一個example。
您可以將兩個圖表導出到PDF文件，然後在那裏打印表格。這裏是一個關於如何去export multiple charts to one pdf的例子。

來源

2012-06-20 18:42:16 Linger

感謝您的回答。這適用於jFiddle，但在我的頁面上，這不僅可以打印圖表，還可以打印頁面上的其他所有內容。我想我可以使用打印CSS來解決問題，但有沒有辦法只打印圖表？ –

我已經更新了我的答案。也許它會爲你工作。 – Linger

這就是我打算使用的，如果不能從客戶端打印多個圖表。如果有人有不同的解決方案，我現在就會解決問題。 –

Highcharts：「全部打印」按鈕

回答

相關問題