web-dev-qa-db-fra.com

Graphique de chart.js au pdf

J'ai vu de nombreux articles décrivant comment utiliser chart.js pour créer un graphique à l'aide de canvas, puis enregistrer le canvas au format png et l'importer dans un pdf. C'est bien, mais que se passe-t-il si vous voulez contourner la partie à l'écran et aller directement à un document PDF et inclure l'image?

Par exemple, je peux avoir deux boutons, un qui ouvre le graphique à l’écran en utilisant canvas. Cette page pourrait alors gérer la sauvegarde et l’importation de cartes dans le pdf sans problème. L’autre bouton ouvre la pdf directement. Est-il possible d’obtenir le graphique dans ce document, en le sauvegardant d’abord ou non sur le serveur? 

J'imagine que l'on pourrait me dire de passer à d3 mais je me demandais si cela est possible dans chart.js?

 enter image description here

pdfcanvaschart.js
9
RGriffiths

C'est bien, mais si vous voulez contourner la partie à l'écran et aller directement à un document PDF et inclure l'image

Vous pouvez toujours utiliser l’exportation de chart.js en tant que PDF avec PhantomJs (un navigateur sans navigateur qui ouvre une page html avec vos graphiques et l’enregistre via PDF). Si vous travaillez avec nodejs, il existe une bonne bibliothèque qui résume les PhantomJs et rend le PDF facile: https://github.com/sindresorhus/pageres . Cela ressemble à une solution de contournement, mais généralement cette toile de PDF ne rend pas bien, spécialement les graphiques!

Oui, vous devez toujours créer une page HTML pour imprimer votre PDF, mais vous avez 2 options:

3
Wagner Leonardi

Bien que cela ne réponde pas directement à la question car je ne pouvais pas demander à chart.js de faire ce que je voulais comme client, j'ai trouvé une bonne solution en utilisant pChart . Lors de la génération du fichier PDF, la carte est créée et est temporairement enregistrée sur le serveur jusqu'à ce que le fichier PDF soit terminé. Le graphique est inséré dans le fichier PDF, puis supprime le graphique du serveur. Il y a un peu de manipulation pour redimensionner correctement l'image.

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