Exporter des graphiques en format PDF (en utilisant javascript et le serveur local - pas de connexion internet)

Oui c'est possible mais cela implique quelques bibliothèques différentes pour travailler. La première Bibliothèque est jsPDF qui permet la création de PDF dans le navigateur. La deuxième est canvg ce qui permet le rendu et l'analyse des SVG, le peu qui est vraiment cool c'est qu'il peut rendre un svg on à l'élément canvas. Enfin est Highcharts module d'exportation ce qui nous permettra d'envoyer le svg au canvg pour qu'il se transforme en une URL de données qui peut ensuite être donnée à jsPDF pour se transformer en votre pdf.

Voici un exemple http://fiddle.jshell.net/leighking2/dct9tfvn/ vous pouvez également voir dans il fichiers source, vous devez inclure dans votre projet.

donc pour démarrer highcharts fournit un exemple d'utilisation de canvg avec son exportation pour enregistrer un graphique en png. parce que vous voulez tous les iamges dans un pdf cela a été légèrement modifié pour notre but de simplement retourner l'url des données

// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
    H.Chart.prototype.createCanvas = function (divId) {
        var svg = this.getSVG(),
            width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
            height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
            canvas = document.createElement('canvas');

        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

        if (canvas.getContext && canvas.getContext('2d')) {

            canvg(canvas, svg);

            return canvas.toDataURL("image/jpeg");

        } 
        else {
            alert("Your browser doesn't support this feature, please use a modern browser");
            return false;
        }

    }
}(Highcharts));

puis pour l'exemple i ont mis en place l'exportation sur un clic de bouton. Cela va chercher tous les éléments d'une certaine classe (donc choisissez un à ajouter à tous vos éléments de carte) et ensuite appeler leurs highcharts.fonction createCanvas.

$('#export_all').click(function () {
    var doc = new jsPDF();

    // chart height defined here so each chart can be palced
    // in a different position
    var chartHeight = 80;

    // All units are in the set measurement for the document
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
    doc.setFontSize(40);
    doc.text(35, 25, "My Exported Charts");

    //loop through each chart
    $('.myChart').each(function (index) {
        var imageData = $(this).highcharts().createCanvas();

        // add image to doc, if you have lots of charts,
        // you will need to check if you have gone bigger 
        // than a page and do doc.addPage() before adding 
        // another image.

        /**
        * addImage(imagedata, type, x, y, width, height)
        */
        doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
    });


    //save with name
    doc.save('demo.pdf');
});

important de noter ici que si vous avez beaucoup de graphiques, vous aurez besoin de gérer leur placement sur une nouvelle page. La documentation pour jsPDF semble vraiment périmée (ils ont une bonne page demos mais pas beaucoup pour expliquer toutes les options possibles), il y a une page Add() fonction et ensuite vous pouvez juste jouer avec les largeurs et les hauteurs jusqu'à ce que vous trouvez quelque chose qui fonctionne.

la dernière partie est juste de configuration des graphiques avec une option pour ne pas afficher le bouton exporter sur chaque graphique qui serait normalement l'affichage.

//charts
$('#chart1').highcharts({
    navigation: {
            buttonOptions: {
                enabled: false
            }
        },

//this is just normal highcharts setup form here for two graphs see fiddle for full details

le résultat n'est pas trop mauvais je suis impressionné par la qualité des graphiques car je n'attendais pas beaucoup de cela, avec un peu de jeu des positions et des tailles pdf pourrait sembler vraiment bon.

voici un écran plan montrant les requêtes réseau faites avant et après l'exportation, quand l'exportation est faite aucune requête est faite http://i.imgur.com/ppML6Gk.jpg

voici un exemple de ce que le pdf ressemble à http://i.imgur.com/6fQxLZf.png (regarde mieux lorsque la vue réelle pdf)

exemple rapide à essayer sur local https://github.com/leighquince/HighChartLocalExport