Render Highcharts canvas come PNG nella pagina

Question

Sto utilizzando la libreria HighCharts per generare alcuni grafici dinamici. Tuttavia, mi piacerebbe rendere l'elemento Canvas HighCharts come un'immagine PNG, in modo che l'utente possa copiare e incollare il grafico in una e-mail, ecc. Senza dover utilizzare la funzione di esportazione.

In particolare, sto cercando di creare un modello di email HTML che includa il grafico e voglio che l'utente sia in grado di selezionare tutto> copia/incolla nel client di posta elettronica invece di copiare/incollare, esportare l'immagine, quindi trovare un modo per inserirlo nella e-mail.

Ho trovato questo: Capture HTML Canvas as gif/jpg/png/pdf?, ma il codice non sembra rendere un'immagine al documento.

Answer 1

Ecco una soluzione lato server basata su PhantomJS. Puoi utilizzare JSONP per effettuare una chiamata interdominio a image.vida.io.

http://image.vida.io/

Il grafico/visualizzazione bisogno di essere accessibile dall'esterno. È possibile passare credenziali all'URL.

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

Quindi è possibile visualizzare l'immagine con tag img:

<img src="data:image/png;base64, [base64 data]"/> 

Funziona attraverso browser.

Answer 2

Here's a hack se si ha il coraggio di utilizzare HighCharts. Usa canvg per analizzare l'SVG in una tela e quindi converte la tela in un PNG.

chart = new Highcharts.Chart({ 
     
    chart: { 
        renderTo: 'container' 
    }, 
     
    title: { 
        text: '' 
    }, 
     
    xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
     
    series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]         
    }], 
     
    navigation: { 
        buttonOptions: { 
            align: 'center' 
        } 
    } 
}); 

canvg(document.getElementById('canvas'), chart.getSVG()) 
     
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png"); 

document.write('<img src="'+img+'"/>'); 

Answer 3

So che questa è ormai una vecchia questione, ma dal momento che si avvicinò 1 # per me in un risultato di ricerca di Google, penso che la pena ricordare che Highcharts ora natively supports a server-side image generation script e funziona benissimo.

Answer 4

Con le informazioni da "Render charts on the server" (da jkraybills answer), ho creato questo esempio utilizzando un minimo Ajax per ottenere un'immagine di un grafico che non è stato reso, e la visualizzazione in un img -tag.

HTML:

<img id="chart" style="width: 600px;" /> 

Javascript:

// Regular chart options 
var options = { 
    title: { 
     text: 'My chart' 
    } 
    ... 
} 

//URL to Highcharts export server 
var exportUrl = 'http://export.highcharts.com/'; 

//POST parameter for Highcharts export server 
var object = { 
    options: JSON.stringify(options), 
    type: 'image/png', 
    async: true 
}; 

//Ajax request 
$.ajax({ 
    type: 'post', 
    url: exportUrl, 
    data: object, 
    success: function (data) { 
     // Update "src" attribute with received image URL 
     $('#chart').attr('src', exportUrl + data); 
    } 
}); 

Come in this JSFiddle demonstration.

Il resto del parametro POST (width, callback ...) è in the documentation.