Biểu đồ từ chart.js đến pdf

Question

Tôi đã thấy rất nhiều bài viết mô tả cách bạn có thể sử dụng chart.js để tạo biểu đồ sử dụng canvas và sau đó lưu canvas vào png và nhập nó vào pdf. Điều này là tốt nhưng nếu bạn muốn bỏ qua phần trên màn hình và đi thẳng đến một tài liệu pdf và bao gồm hình ảnh?

Ví dụ: tôi có thể có hai nút, một nút mở biểu đồ trên màn hình bằng cách sử dụng canvas. Sau đó, trang này có thể xử lý việc lưu biểu đồ và nhập vào tệp pdf mà không gặp sự cố. Nút kia mở trực tiếp pdf. Có thể đưa biểu đồ vào tài liệu này, hoặc là lưu nó vào máy chủ đầu tiên bằng cách nào đó hay không?

Tôi nghi ngờ tôi có thể được yêu cầu chuyển sang d3 nhưng tôi đã tự hỏi liệu có thể trong chart.js không?

Answer 1

Điều này là tốt nhưng những gì nếu bạn muốn bỏ qua trên một phần màn hình và đi thẳng vào một tài liệu pdf và bao gồm các hình ảnh

Bạn vẫn có thể sử dụng chart.js xuất khẩu dưới dạng PDF với PhantomJs (trình duyệt không đầu sẽ mở trang html có biểu đồ của bạn và lưu nó qua PDF). Nếu bạn đang làm việc với các nút có một thư viện tốt để tóm tắt các PhantomJ và làm cho tệp PDF dễ dàng: https://github.com/sindresorhus/pageres. Nó có vẻ giống như một workaround, nhưng thường là những vải để PDF không hiển thị tốt, bảng xếp hạng đặc biệt!

Yeah, bạn vẫn cần phải tạo ra một trang html để in PDF của bạn, tuy nhiên bạn có 2 lựa chọn:

• Sử dụng cùng một trang, và via CSS print styles, you can show/hide things that will print only on PDF (như PhantomJs sẽ tạo PDF trong chế độ in).

• Tạo một trang web tùy chỉnh chỉ dành cho PDF renderization

Answer 2

Trong khi điều này không trả lời câu hỏi trực tiếp như tôi không thể có được chart.js để làm những gì tôi muốn là phía khách hàng, tôi tìm thấy một giải pháp tốt sử dụng pChart. Khi bản pdf được tạo ra, biểu đồ được tạo ra và tạm thời được lưu trên máy chủ cho đến khi bản pdf hoàn tất. Biểu đồ được chèn vào pdf và sau đó xóa biểu đồ khỏi máy chủ. Có một chút thao tác để kích thước chính xác hình ảnh.

$myPicture->render("path/imagename.png"); 

if (file_exists("path/imagename.png")) { 
    $ycurrent = $pdf->GetY(); 
    list($width, $height) = getimagesize("path/imagename.png"); 
    $imageWidth = 160; 
    $ratio = $imageWidth/$width; 
    $xpos = 25; 
    $pdf->Image("path/imagename.png", $xpos, $ycurrent, $width * $ratio, $height * $ratio, "png", ''); 
    unlink ("path/imagename.png"); 
}