Salva grafico flottaggio come immagine

Question

Ciao Sto cercando di salvare il grafico della flotta come immagine (png/jpeg ..). Osservo altre domande che consigliano di usare canvas.toDataURL ("image/png"); o canvas2image. Comunque sto usando div per flot come segue.

<div id="graph"> <div id="graphc" style="width: 600px;height:153px; top: 560px; left:120px; auto;"> </div> </div> 

plot= $.plot($("#graph #graphc"), 
      [ {data: data5 ], 
      xaxis: { mode: "time",minTickSize: [10, "second"], 
      timeformat: "%0H:%0M" } }); 

Come posso salvare questo grafico? Grazie per l'aiuto.

Answer 1

È necessario ottenere la tela creata da flot all'interno del div. Se guardi il numero docs vedrai che c'è una funzione .getCanvas(). Oppure potresti usare jQuery per selezionare una tela all'interno del tuo div.

Una volta creato il canvas, è possibile utilizzare .toDataURL o qualsiasi altra tecnica.

Così avete questo:

plot= $.plot($("#graph #graphc"), 
     [ {data: data5 ], 
     xaxis: { mode: "time",minTickSize: [10, "second"], 
     timeformat: "%0H:%0M" } }); 

E poi si dovrebbe essere in grado di fare questo:

var myCanvas = plot.getCanvas(); 

Per scaricare realmente un file, è necessario utilizzare .toDataURL(), quindi sostituire image/png mimo digitare con image/octet-stream e quindi impostare il document.location.href nella stringa:

var image = myCanvas.toDataURL(); 
image = image.replace("image/png","image/octet-stream"); 
document.location.href=image; 

Oppure puoi usare canvas2image per fare tutto questo per te.

Modifica: l'unico problema è che, almeno in FireFox, l'immagine verrà salvata con un nome casuale e un'estensione .part. Modificandolo su .png si rivelerà che è l'immagine reale. Non sono sicuro se c'è un buon modo per convincere il browser a salvarlo con un nome descrittivo o almeno con l'estensione corretta.

Answer 2

Ho apportato alcune correzioni al codice. Per salvare localmente il grafico puoi usare il codice qui sotto.

var plot= $.plot($("#graph #graphc"), 
[ {data: data5 ], 
xaxis: { mode: "time",minTickSize: [10, "second"], 
timeformat: "%0H:%0M" } }); 

var myCanvas = plot.getCanvas(); 
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); /// here is the most important part because if you dont replace you will get a DOM 18 exception. 
document.location.href=image; 

Answer 3

non ero felice con una qualsiasi di queste soluzioni a causa dei seguenti problemi:

1. mie etichette delle tacche non sono sulla tela
2. mie etichette degli assi non sono sulla tela
3. Il salvataggio di Firefox con canvas2image è confuso per un utente normale

La mia soluzione a questo problema è di cambiare il opzioni per il grafico da sostituire come grafico solo su tela, quindi utilizzare canvas-to-blob per convertire questo grafico in un blob, quindi FileSaver per salvare il blob per l'utente, infine sostituisco il grafico dopo aver salvato l'immagine.

richiede i seguenti plugin JS:

• jquery.flot.canvas
• jquery.flot.axislabels
• FileSaver
• canvas-to-blob

Codice:

//set data array, and options 
$('a.download_as_img').click(function(e){ 
    e.preventDefault(); 
    saveAsImage(graph_selector, data, options, xaxis,yaxis) 
}) 

function saveAsImage(graph_selector, data_arr, options, xaxis, yaxis){ 
    var canvas = replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis); 
    var title = 'chart';// or some jquery way to get your title or w/e 
    canvas.toBlob(function(blob) { 
    saveAs(blob, title + ".png"); 
    }); 

    //convert back to normal 
    var plot = $.plot(graph_selector, data_arr, options); 
} 

//helper for saveAsImage 
// returns canvas 
function replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis){ 
    //change canvas options to true and replot 
    var canvas_options = { 
    canvas: true, 
    axisLabels: { 
     show: true 
    }, 
    xaxes: [ 
    { 
     axisLabelUseCanvas: true, 
     axisLabel: xaxis 
    } 
    ], 
    yaxes: [ 
    { 
     axisLabelUseCanvas: true, 
     position: 'left', 
     axisLabel: yaxis 
    } 
    ] 
    } 
    var merged_opts = {} 
    $.extend(merged_opts, options, canvas_options); //done this way to ensure canvas_options take priority 
    var plot = $.plot(graph_selector, data_arr, merged_opts); 
    return plot.getCanvas(); 
} 

Forse se si hanno preoccupazioni simili sulle soluzioni di cui sopra, si può provare questo.