Comment enregistrer une image du graphique sur le serveur avec des graphiques actifs?

Avec highcharts, vous avez intégré dans le bouton pour télécharger le tableau actuel (exemple: http://www.highcharts.com/demo/ce bouton: Comment enregistrer une image du graphique sur le serveur avec des graphiques actifs?). Vous pouvez l'enregistrer en tant que fichiers PNG, JPEG, PDF ou SVG.

Ce que je voudrais faire est de créer un lien qui enregistre l'image sur le serveur, au lieu de la télécharger. Comment pourrais-je le faire ?

Je suppose que je dois modifier le exportChart fonction dans le exporting.src.js fichier. Il ressemble à ça (mais je ne sais pas javascript assez pour le faire) :

exportChart: function (options, chartOptions) {
        var form,
            chart = this,
            svg = chart.getSVG(chartOptions);

        //merge the options
        options = merge(chart.options.exporting, options);

        //create the form
        form = createElement('form', {
            method: 'post',
            action: options.url
        }, {
            display: NONE
        }, doc.body);

        //add the values
        each(['filename', 'type', 'width', 'svg'], function (name) {
            createElement('input', {
                type: HIDDEN,
                name: name,
                value: {
                    filename: options.filename || 'chart',
                    type: options.type,
                    width: options.width,
                    svg: svg
                }[name]
            }, null, form);
        });

        //submit
        form.submit();

        //clean up
        discardElement(form);
    },

source d'informationauteur Benjamin Crouzier

  1. 12

    Il pourrait être fait vraiment facile avec PhantomJS. Vous pouvez rendre Highchart graphique et l'enregistrer au format SVG, PNG, JPEG ou PDF. L'exemple ci-dessous rend une démo Highcharts diagramme de SVG et PDF en même temps:

    var system = require('system');
var page = require('webpage').create();
var fs = require('fs');
//load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");
//chart demo
var args = {
width: 600,
height: 500
};
var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: opt.width,
height: opt.height
},
exporting: {
enabled: false
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
yAxis: {
title: {
text: 'Y-values'
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
},
series: {
enableMouseTracking: false, 
shadow: false, 
animation: false
}
},
series: [{
type: 'column',
name: 'Andrii',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'Fabian',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joan',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Andrii',
y: 13,
color: '#4572A7'
}, {
name: 'Fabian',
y: 23,
color: '#AA4643'
}, {
name: 'Joan',
y: 19,
color: '#89A54E'
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
return chart.getSVG();
},  args);
//Saving SVG to a file
fs.write("demo.svg", svg);
//Saving diagram as PDF
page.render('demo.pdf');
phantom.exit();

    Si vous enregistrez le code demo.jsalors il suffit d'exécuter bin/phantomjs demo.js pour générer demo.svg et demo.pdf

  2. 10

    Je viens de mettre en œuvre ce à l'aide de Nobita de la méthode. J'ai été la création d'une enquête qui a montré à l'utilisateur les résultats dans un graphique, téléchargé l'image sur mon serveur et ensuite envoyé un mail avec l'image. Voici quelques choses à noter.

    J'ai eu à faire quelques mises à jour de la highcharts/exporting-server/index.php fichier qui sont les suivantes:

    J'ai changé le répertoire "temp" pour quelque chose d'autre et il suffit de noter que c'est dans 4 endroits différents.

    J'ai dû changer shell_exec() en ajoutant "-XX:MaxHeapSize=256m" parce qu'il me donnait une erreur:

    $output = shell_exec("java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");

    Si vous voulez télécharger cette image, vous pouvez laissez seul:

    header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);

    Mais, je l'ai changé parce que j'ai voulu renvoyer le chemin d'accès à l'image, j'ai donc supprimé le ci-dessus et de le remplacer par le chemin de l'image (Remarque que je suis juste en utilisant le nom temporaire.):

    echo "/mypathhere/results/$tempName.$ext";

    Aussi, ce fichier est de supprimer le fichier svg et aussi le nouveau fichier que vous avez fait. Vous devez supprimer le code qui supprime le fichier:

    unlink($outfile);

    Et vous pouvez également supprimer la ligne avant si vous souhaitez conserver le fichier svg.

    Assurez-vous d'inclure highcharts/js/modules/exporting.js

    Puis, dans votre JS vous pouvez faire quelque chose comme ce qui suit:

    var chart = new Highcharts.Chart();    
var imageURL = '';
var svg = chart.getSVG();
var dataString = 'type=image/jpeg&filename=results&width=500&svg='+svg;
$.ajax({
type: 'POST',
data: dataString,
url: '/src/js/highcharts/exporting-server/',
async: false,
success: function(data){
imageURL = data;
}
});

    L'URL que vous postez est la nouvelle version de l' /exporting-server/index.php. Ensuite, vous pouvez utiliser le imageURL toutefois vous le souhaitez.

  3. 4

    Je n'ai pas fait cela avant, mais je crois que vous voulez jouer avec la index.php fichier situé dans le exporting-server dossier.
    Par défaut Highcharts offre (gratuitement) un service web, mais vous pouvez le modifier et de créer votre propre service web pour l'exportation, ou faire ce que vous voulez avec le graphique. Regardez ces instructions qui peut être trouvé ici Module d'exportation:

    "Si vous voulez mettre en place ce service web sur votre propre serveur, l'index.php fichier qui gère le POSTE est fourni dans le package de téléchargement à l'intérieur de l' /export-répertoire du serveur.

    1. Assurez-vous que PHP et Java est installé sur votre serveur.
    2. Télécharger le index.php fichier /exporter-répertoire du serveur dans
      le package de téléchargement sur votre serveur.
    3. Dans votre programme FTP, créer un répertoire appelé temp dans la même
      répertoire index.php et chmod ce nouveau répertoire en 777
      (Serveurs Linux/Unix uniquement).
    4. Télécharger Batik de http://xmlgraphics.apache.org/batik/#download.
      Trouver la distribution binaire pour votre version de jre
    5. Télécharger batik-rasterizer.jar et l'ensemble du répertoire lib à un
      emplacement sur votre serveur web. Dans les options en haut de l'
      index.php fichier, définissez le chemin d'accès à batik-rasterier.jar.
    6. Dans votre tableau d'options, définissez l'exportation.url option pour correspondre à votre
      PHP emplacement du fichier. "
  4. 0

    Vous pouvez essayer ce

     var chart = $('#yourchart').highcharts();
svg = chart.getSVG();   
var base_image = new Image();
svg = "data:image/svg+xml,"+svg;
base_image.src = svg;
$('#mock').attr('src', svg);

    Prendre html de Fantaisie et de les envoyer à la DB ou enregistrer uniquement le code binaire .

    Enregistrer highchart comme image binaire