Comment enregistrer une image du tableau sur le serveur avec Highcharts?
Avec HighChartS, vous avez un bouton intégré pour télécharger le graphique actuel (exemple: http://www.hightchats.com/demo/ , ce bouton: 
). Vous pouvez l'enregistrer sous forme de PNG, JPEG, PDF ou SVG.
Ce que j'aimerais faire, c'est créer un lien qui enregistre l'image sur le serveur, au lieu de le télécharger . Comment pourrais-je faire ça?
Je suppose que je dois modifier la fonction exportChart dans le fichier exportateur.src.js. Cela ressemble à ceci (mais je ne connais pas assez javascript 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);
},
Cela pourrait être fait vraiment facile avec PhantomJS . Vous pouvez rendant Highchart graphique et le sauvegarder à SVG, PNG, JPEG ou PDF. L'exemple ci-dessous rend une démonstration Highcharts diagramme à 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 comme demo.js, alors courir juste bin/phantomjs demo.js générer demo.svg et demo.pdf
Je viens de mettre en œuvre cela en utilisant la méthode de Nobita. Je créais une enquête qui a montré les résultats de l'utilisateur dans un graphique, a téléchargé l'image sur mon serveur, puis envoyé un courrier électronique avec l'image. Voici quelques points à noter.
J'ai dû faire quelques mises à jour du fichier HighcharTs/Exportation-Server/Index.PHP, qui sont les suivants:
J'ai changé le répertoire de "Temp" à quelque chose d'autre et notez simplement qu'il est dans 4 endroits différents.
Je devais changer shell_exec () Ajout "-xx: maxheapsize = 256m" car 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 qu'il télécharge cette image, vous pouvez laisser ce qui suit uniquement:
header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);
Mais, j'ai changé cela parce que je voulais renvoyer la voie à l'image, donc j'ai supprimé ce qui précède et la remplacer avec le chemin d'image (Notez que j'utilise simplement le nom temporaire.):
echo "/mypathhere/results/$tempName.$ext";
De plus, ce fichier supprime le fichier SVG et le nouveau fichier que vous avez apporté. Vous devez supprimer le code qui supprime le fichier:
unlink($outfile);
Et vous pouvez également supprimer la ligne avant de cela si vous souhaitez conserver le fichier SVG.
Assurez-vous d'inclure Highcharts/JS/Modules/Exportation.js
Ensuite, 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 du /exporting-server/index.php. Ensuite, vous pouvez utiliser l'imageRL mais vous aimez.
Je ne l'ai pas fait auparavant, mais je crois que vous voulez jouer avec le index.php fichier situé dans le exporting-server dossier. Par défaut Highcharts fournit (gratuitement) un service Web, mais vous pouvez modifier et créer votre propre service Web pour exporter ou faire ce que vous voulez avec le graphique. Regardez ces instructions qui peuvent être trouvées ici Module d'exportation :
"Si vous souhaitez configurer ce service Web sur votre propre serveur, le fichier index.php qui gère le POST est fourni dans le package de téléchargement dans le répertoire/exportation-serveur.
- Assurez-vous que =PHP et Java est installé sur votre serveur.
- Téléchargez le fichier index.php à partir du répertoire/exportation-serveur dans le package de téléchargement sur votre serveur.
- Dans votre programme FTP, créez un répertoire appelé Temp dans le même répertoire que index.php et chmod ce nouveau répertoire à 777 (serveurs Linux/Unix uniquement).
- Téléchargez Batik de http://xmlgraphics.apache.org/batik/#download . Trouvez la distribution binaire pour votre version de JRE
- Téléchargez Batik-Rasterizer.jar et l'ensemble du répertoire libéro à un emplacement sur votre serveur Web. Dans les options En haut du fichier Index.PHP, définissez le chemin de Batik-Rasterier.jar.
- Dans vos options de graphique, définissez l'option exportation.url pour correspondre à votre PHP Emplacement du fichier. "
Vous pouvez essayer ceci
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);
Prenez HTML de Mock et d'envoyer à DB ou enregistrez uniquement le code binaire.