Wykres z chart.js do pdf

Question

Widziałem wiele stanowisk opisujący w jaki sposób można wykorzystać chart.js stworzyć wykres używając canvas i następnie zapisać canvas do PNG, a następnie zaimportować je do pdf. To dobrze, ale co jeśli chcesz ominąć część ekranu i przejść od razu do dokumentu PDF i dołączyć obraz?

Na przykład mogę mieć dwa przyciski, jeden, który otwiera wykres na ekranie przy użyciu canvas. Ta strona może następnie obsługiwać zapisywanie i importowanie wykresów do pliku PDF bez problemu. Drugi przycisk otwiera bezpośrednio pdf. Czy możliwe jest umieszczenie wykresu w tym dokumencie, czy w ogóle go zapisuje na serwerze?

Podejrzewam, że mogę zostać przeniesiony do d3, ale zastanawiałem się, czy jest to możliwe w chart.js?

Answer 1

To jest w porządku, ale co zrobić, jeśli chcesz ominąć na części ekranu i idź prosto do dokumentu PDF i zawierać obraz

można nadal korzystać chart.js eksportu jako PDF z PhantomJs (bezgłową przeglądarką, która otworzy stronę html z twoimi wykresami i zapisze ją przez PDF). Jeśli pracujesz z nodejs, jest dobra biblioteka, która streszcza PhantomJs i sprawia, że ​​plik PDF jest łatwy: https://github.com/sindresorhus/pageres. Wydaje się, że jest to obejście problemu, ale zazwyczaj te obrazy w formacie PDF nie są wyświetlane poprawnie, a zwłaszcza wykresy!

Tak, trzeba jeszcze stworzyć stronę HTML, aby wydrukować plik PDF, jednak masz 2 opcje:

• używać tej samej strony, a via CSS print styles, you can show/hide things that will print only on PDF (jak PhantomJs utworzy plik PDF w trybie druku).

• Tworzenie niestandardowego stronę tylko dla PDF renderization

Answer 2

Choć nie bezpośrednio odpowiedzieć na pytanie, jak ja nie mógł dostać chart.js robić to, co chciałem być po stronie klienta, znalazłem dobre rozwiązanie przy użyciu pChart. W trakcie generowania pliku PDF tworzony jest wykres, który jest tymczasowo zapisywany na serwerze do czasu ukończenia pliku PDF. Wykres jest wstawiany do pliku pdf, a następnie usuwany z serwera. Istnieje trochę manipulacji, aby poprawnie powiększyć obraz.

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