Come salvare un’immagine del grafico sul server con i grafici alti?

Potrebbe essere fatto davvero facile con PhantomJS . È ansible Highchart rendering del diagramma di Highchart e salvarlo in formato SVG, PNG, JPEG o PDF. L’esempio seguente Highcharts diagramma dimostrativo di Highcharts su SVG e PDF allo stesso tempo:

 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('
'); 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(); 

Se salvi il codice come demo.js , demo.js semplicemente bin/phantomjs demo.js per generare demo.svg e demo.pdf

Lo implemento solo usando il metodo di Nobita. Stavo creando un sondaggio che mostrava i risultati dell’utente in un grafico, ha caricato l’immagine sul mio server e poi ha inviato un’email con l’immagine al suo interno. Ecco alcune cose da notare.

Ho dovuto apportare alcuni aggiornamenti al file highcharts / export-server / index.php che sono i seguenti:

Ho cambiato la directory da “temp” a qualcos’altro e ho notato che è in 4 diverse posizioni.

Ho dovuto cambiare shell_exec () aggiungendo “-XX: MaxHeapSize = 256m” perché mi stava dando un errore:

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

Se vuoi scaricare quell’immagine puoi lasciare solo quanto segue:

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

Ma l’ho modificato perché volevo rimandare il percorso dell’immagine, quindi ho cancellato quanto sopra e lo sostituisco con il percorso dell’immagine ( nota che sto solo usando il nome temporaneo ):

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

Inoltre, questo file sta cancellando il file svg e anche il nuovo file che hai creato. È necessario rimuovere il codice che elimina il file:

 unlink($outfile); 

E puoi anche cancellare la riga prima di essa se vuoi mantenere il file svg.

Assicurati di includere highcharts / js / modules / exports.js

Quindi, nel tuo JS puoi fare qualcosa di simile al seguente:

 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 che stai postando è la nuova versione di /exporting-server/index.php. Quindi, puoi utilizzare imageURL come preferisci.

Non l’ho mai fatto prima, ma credo che tu voglia giocare con il file index.php che si trova nella cartella del exporting-server . Per impostazione predefinita, Highcharts fornisce (gratuitamente) un servizio Web, ma è ansible modificarlo e creare il proprio servizio Web per l’esportazione o fare ciò che si desidera con il grafico. Guarda queste istruzioni che possono essere trovate qui Modulo di esportazione :

“Se si desidera configurare questo servizio Web sul proprio server, il file index.php che gestisce il POST viene fornito nel pacchetto di download all’interno della directory / export-server.

1. Assicurati che PHP e Java siano installati sul tuo server.
2. Carica il file index.php dalla directory / export-server nel pacchetto di download sul tuo server.
3. Nel tuo programma FTP, crea una directory chiamata temp nella stessa directory di index.php e chmod questa nuova directory a 777 (solo per i server Linux / Unix).
4. Scarica Batik da http://xmlgraphics.apache.org/batik/#download . Trova la distribuzione binaria per la tua versione di jre
5. Carica batik-rasterizer.jar e l’intera directory lib in una posizione sul tuo server web. Nelle opzioni nella parte superiore del file index.php, imposta il percorso su batik-rasterier.jar.
6. Nelle opzioni del grafico, impostare l’opzione export.url in modo che corrisponda al percorso del file PHP. ”

Puoi provare questo

  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); 

Prendi html di Mock e invia al DB o salva solo il codice binario.

Salva highchart come immagine binaria