如何打印flot圖

Question

任何人都可以幫我找出，如何打印動態圖作為flot生成的例子。 我試過這個，但它打印整頁，但我只想要圖形部分。

function printGraph(){
    $('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {                        
        //Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
        //canvas.toDataURL("image/png");
        window.print('placeholder');
    });
}

Answer 1

本文介紹如何將canvas復制到普通img ，然后可以輕松打印或保存為圖像。

重要的部分：

img.src = canvas.toDataURL();

有關詳細信息，請參閱下面的Ignacio Correia的答案 。

Answer 2

啟動一個新窗口，其中只包含圖表或替代css，類似於Google地圖在打印時所執行的操作。

Answer 3

此帖已被編輯，請查看所有可能的解決方案

---

從我搜索到的內容中發現，您只有2個選擇或嘗試打印CANVAS，或者將EXPORT打印為圖像，或者我的想法是將圖像與內容分開並嘗試僅打印圖形。 這是一個由Flot撰寫的FAQ，如何導出圖像： 問題3

問：我可以導出圖表嗎？

答：您可以將Flot使用的canvas元素渲染的圖像作為PNG或JPEG（請記住設置背景）。 請注意，它不會包含未在畫布中繪制的任何內容（例如圖例）。 並且它不適用於使用VML的excanvas，但您可以嘗試使用Flashcanvas。

解決方案1 - 導出圖片：

將圖像導出到計算機，然后打印

解決方案2 - FLOT到CANVAS：

• 將畫布保存為圖像 - 由Mozilla提供
• 另存為圖像Flot插件
• 相關問題 - 在IE8中打印問題

解決方案3 - 我自己的Modal打印

到目前為止，這不是最好的解決方案，但它有效，這是一個演示：

• JSFIDDLE正常演示
• JSFIDDLE全屏演示

腳步

1. 加載Fancybox
2. 使用INLINE FRAME打開圖表
3. 顯示后在回調上打印
4. 打印后重新加載頁面以重新設計頁面

這是必要的代碼：

$(document).ready(function() {
  $(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    afterShow   : function() {
        alert('You are about to print the graph!');
        window.print();
    },
    afterClose  : function() {
        alert('We need to refresh the page!');
        window.location.reload(false); 
    }        
  });
});

額外此相關問題是關於將Flot導出為PDF，不知道您是否感興趣： 將Flot導出為PDF

編輯 - 工作解決方案這是一個如何導出圖像的工作演示： FLOT到IMAGE

Answer 4

您可以使用具有media="print"的單獨樣式表隱藏您不希望打印的頁面部分。 這也允許您調整圖形本身的最終打印輸出，例如使其更大。

Answer 5

使用html2canvas找到了解決方案。 首先將容器div指定為具有“theChart”的id。

<div class="box" id="theChart">
    <div id="placeholder"></div>
</div>

現在我們可以創建一個圖像：

html2canvas($('#theChart')).then(function(canvas) {
    image = canvas.toDataURL("image/png");
    document.location.href=image;
});

當canvas.toDataURL()不呈現軸標簽時，這也將解決此問題。