datos FLOT como imagen para escribir en PDF

Question

Estoy usando jQuery/FLOT para dibujar un gráfico, me gustaría que el usuario pueda descargar una versión en PDF del gráfico. Estoy escribiendo el PDF usando ColdFusion. Después de crear el gráfico, entonces envío el html del gráfico div, vía ajax a un script CF que usa cfdocument para escribir el pdf. El problema es que en el PDF, solo muestra el eje y las etiquetas, no los datos del gráfico real. ¿Alguien sabe de una forma de obtener la imagen real que se crea dinámicamente en el lienzo?

Answer 1

no creo que esto ha sido implementado en flot todavía ver http://code.google.com/p/flot/issues/detail?id=175

Answer 2

Salida CutyCapt (http://cutycapt.sourceforge.net/), parece que funciona con Flot.

Answer 3

También puede tomar una instantánea de su canvas usando toDataURL() y suplente en un elemento img, que el convertidor de PDF debe ser capaz de manejar:

var canvas = $("canvas.base")[0]; 
var tmpimg = canvas.toDataURL("image/png"); 
//console.log(tmpimg); 
$("body").append('<img src="'+tmpimg+'"/>'); 

Tenga en cuenta que la imagen producida es simplemente la canvas contenidos (es decir, el gráfico en sí) y no incluye los ejes o la leyenda. Puede que tenga que hacer una sustitución/alineación complicada de la imagen en el marcador de posición de flot, pero le proporciona una imagen utilizable para comenzar.

Esto es solo un ligero repaso de la respuesta aceptada al this question y pensé que alguien aquí podría encontrarlo útil.

Answer 4

Puede representar el gráfico en el servidor con un navegador sin cabeza como phantomJS (motor WebKit).

Solo necesita una secuencia de comandos que toma una URL y representa la salida como una cadena codificada en Base64 para la secuencia de la consola o escribe una imagen.

Por lo que sé, es la única forma de hacerlo.

Aquí hay un guión para PhantomJS que da salida a una página web determinada como base64 imagen cuerdas:

var page = require('webpage').create(); 
var system = require('system'); 

var pageUrl = system.args[1]; 

page.viewportSize = { width: 1280, height: 720 }; 
page.open(pageUrl , function() { 
    console.log(page.renderBase64('PNG')); 
    phantom.exit(); 
});