Làm thế nào để in đồ thị flot

Question

Bất kỳ cơ thể nào có thể giúp tôi tìm hiểu, làm thế nào để in đồ thị động như ví dụ được tạo ra bởi flot. Tôi đã thử nó nhưng nó in toàn bộ trang, nhưng tôi chỉ muốn phần đồ thị.

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

Khởi chạy cửa sổ mới chỉ với biểu đồ hoặc với CSS thay thế tương tự như những gì bản đồ google thực hiện khi bạn in.

Answer 2

article mô tả cách sao chép canvas thành img bình thường, sau đó có thể dễ dàng được in hoặc lưu dưới dạng hình ảnh.

Phần quan trọng:

img.src = canvas.toDataURL(); 

Xem vĩ đại answer dưới đây từ Ignacio Correia để biết thêm chi tiết.

Answer 3

Attention bài này đã được chỉnh sửa, vui lòng xem tất cả các giải pháp khả thi

---

Từ những gì tôi đã tìm kiếm và tìm thấy bạn chỉ có 2 lựa chọn hoặc cố gắng in CANVAS, hoặc xuất khẩu như một hình ảnh hoặc ý tưởng của tôi là tách hình ảnh khỏi nội dung và cố gắng chỉ in biểu đồ. Đây là Câu hỏi thường gặp của Flot, bạn có thể xuất hình ảnh như thế nào: Question Number 3

Hỏi: Tôi có thể xuất đồ thị không?

A: Bạn có thể lấy hình ảnh được hiển thị bởi phần tử canvas được sử dụng bởi Flot dưới dạng PNG hoặc JPEG (nhớ đặt nền). Lưu ý rằng nó sẽ không bao gồm mọi thứ không được vẽ trong canvas (chẳng hạn như chú giải). Và nó không hoạt động với excanvas sử dụng VML, nhưng bạn có thể thử Flashcanvas.

SOLUTION 1 - Xuất hình ảnh:

Export image to computer and then print it

SOLUTION 2 - Flot để CANVAS:

• Saving canvas as images - By Mozilla
• Save as Image Flot Plugin
• Related question - Problem printing in IE8

SOLUTION 3 - riêng, phương thức in My

Đây không phải là giải pháp tốt nhất cho đến nay nhưng nó hoạt động, đây là một bản demo:

• JSFIDDLE Normal Demo
• JSFIDDLE Fullscreen Demo

bước

1. tải Fancybox
2. Mở bằng INLINE KHUNG đồ thị
3. IN trên gọi lại sau buổi
4. Nạp lại trang sau khi in để thiết kế lại trang

Đây là mã cần thiết:

$(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); 
    }   
    }); 
}); 

tắm câu hỏi liên quan này là về xuất khẩu Flot sang PDF, không biết nếu bạn có thể quan tâm: Export Flot to PDF

EDIT - CÔNG TÁC GIẢI PHÁP Đây là một bản demo làm việc như thế nào để xuất hình ảnh : FLOT to IMAGE

Answer 4

Bạn có thể ẩn các phần của trang mà bạn không muốn in bằng cách sử dụng biểu định kiểu riêng có media="print". Điều này cũng sẽ cho phép bạn tinh chỉnh đầu ra in cuối cùng của biểu đồ, ví dụ như làm cho nó lớn hơn.

Answer 5

Tìm thấy giải pháp bằng cách sử dụng html2canvas. Trước tiên, chỉ định div vùng chứa để có id như "theChart".

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

Bây giờ chúng ta có thể tạo ra một hình ảnh:

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

này cũng sẽ giải quyết vấn đề khi canvas.toDataURL() không làm cho nhãn trục.