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

Question

Con gli highcharts, è disponibile un pulsante incorporato per scaricare il grafico corrente (esempio: http://www.highcharts.com/demo/, questo pulsante: ). È possibile salvarlo come PNG, JPEG, PDF o SVG.

Quello che mi piacerebbe fare è creare un collegamento che salvi l'immagine sul server, invece di scaricarlo. Come potrei farlo?

Suppongo di dover modificare la funzione exportChart nel file export.src.js. Sembra che questo (ma non so javascript abbastanza per farlo):

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

Answer 1

non l'ho fatto prima, ma credo che si vuole giocare con il file index.php si trova nella cartella exporting-server. Per impostazione predefinita Highcharts fornisce (gratuitamente) un servizio Web, ma è possibile 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 Export module:

"Se si desidera impostare questo servizio Web sul proprio server, il file index.php che gestisce il POST viene fornito nel pacchetto di download all'interno del/export- directory Server.

1. assicurarsi che PHP e Java è installato sul server.
2. caricare il file index.php dalla directory/esportazione-server nel pacchetto di download al server.
3. in il tuo programma FTP, crea una directory chiamata temp nello stessoDirectorycome index.php e chmod questa nuova directory su 777 (solo 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 , impostare 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 . "

Answer 2

Ho appena implementare questo utilizzando il metodo di Nobita. Stavo creando un sondaggio che ha mostrato risultati dell'utente in un grafico, caricato l'immagine al mio assistente e poi inviato una e-mail con l'immagine in esso. Ecco alcuni Cose da notare

ho dovuto fare alcuni aggiornamenti alle Highcharts/esportazione-server/file index.php, che sono i seguenti:.

ho cambiato la directory da "temp" a qualcos'altro e appena nota che è in 4 luoghi diversi.

ho dovuto cambiare shell_exec() l'aggiunta di "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 lo si vuole scaricare l'immagine si può lasciare il seguente da solo:

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

Ma, ho cambiato questo perché volevo mandare indietro il percorso dell'immagine, così ho cancellato quanto sopra e sostituirlo con il percorso dell'immagine (nota che sto usando solo il nome provvisorio.):

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

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

unlink($outfile); 

E si può anche cancellare la linea prima che se si desidera mantenere il file in formato SVG.

Assicurati di includere Highcharts/js/modules/exporting.js

Poi, nel vostro JS si può 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 stai postando è il nuovo versione del /exporting-server/index.php. Quindi, puoi utilizzare imageURL come preferisci.

Answer 3

Potrebbe essere fatto davvero facile con PhantomJS. È possibile eseguire il rendering della tabella Highchart e salvarla in SVG, PNG, JPEG o PDF. L'esempio che segue rende un diagramma demo Highcharts per 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('<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(); 

Se si salva il codice come demo.js, quindi basta eseguire bin/phantomjs demo.js per generare demo.svg e demo.pdf

Answer 4

si può 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); 

Prendere html di Mock e inviare al DB o salvare solo il codice binario.

Save highchart as binary image