Cómo imprimir el gráfico de flot

Question

¿Puede algún cuerpo ayudarme a averiguar, cómo imprimir un gráfico dinámico como el ejemplo generado por flot? Probé esta pero está imprimiendo toda la página, pero solo quiero la parte del gráfico.

function printGraph(){ 
    $('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {       
     //Canvas2Image.saveAsPNG(document.getElementById('placeholder')); 
     //canvas.toDataURL("image/png"); 
     window.print('placeholder'); 
    }); 
} 

Answer 1

Abre una nueva ventana con solo el gráfico o con CSS alternativo similar a lo que hace google maps al imprimir.

Answer 2

Este article describe cómo copiar el canvas en un img normal que luego se puede imprimir o guardar fácilmente como una imagen.

La parte importante:

img.src = canvas.toDataURL(); 

ver la gran answer debajo de Ignacio Correia para más detalles.

Answer 3

atención este post han sido editados, por favor ver todas las soluciones posibles

---

Por lo que he buscado y encontrado que sólo tiene 2 opciones, o intenta imprimir el lienzo, o la exportación como una imagen o mi idea es separar la imagen del contenido e intentar imprimir solo el gráfico. Aquí hay una pregunta frecuente de Flot, ¿cómo se puede exportar la imagen? Question Number 3

P: ¿Puedo exportar el gráfico?

A: Puede tomar la imagen representada por el elemento canvas utilizado por Flot como PNG o JPEG (recuerde establecer un fondo). Tenga en cuenta que no incluirá todo lo que no esté dibujado en el lienzo (como la leyenda). Y no funciona con excanvas que usa VML, pero puede probar Flashcanvas.

SOLUCIÓN 1 - Exportación de imágenes:

Export image to computer and then print it

SOLUCIÓN 2 - FLOT a la lona:

• Saving canvas as images - By Mozilla
• Save as Image Flot Plugin
• Related question - Problem printing in IE8

SOLUCIÓN 3 - Mi propia, la impresión modal

Ésta no es la mejor solución, con mucho, pero funciona, aquí hay una demostración:

• JSFIDDLE Normal Demo
• JSFIDDLE Fullscreen Demo

Pasos

1. carga FancyBox
2. abierto usando marco en la línea del gráfico
3. PRINT en devolución de llamada después del espectáculo
4. cargar la página después de la impresión para rediseñar la página

Aquí es el código necesario:

$(document).ready(function() { 
    $(".various").fancybox({ 
    maxWidth : 800, 
    maxHeight : 600, 
    fitToView : false, 
    width  : '70%', 
    height  : '70%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    afterShow : function() { 
     alert('You are about to print the graph!'); 
     window.print(); 
    }, 
    afterClose : function() { 
     alert('We need to refresh the page!'); 
     window.location.reload(false); 
    }   
    }); 
}); 

extra Esta cuestión relacionada es acerca de la exportación a PDF Flot, no sé si puede interesar: Export Flot to PDF

EDITAR - SOLUCIÓN DE TRABAJO He aquí una demostración de cómo trabajar para exportar la imagen : FLOT to IMAGE

Answer 4

Puede ocultar las partes de la página que no desea imprimir utilizando una hoja de estilo separada que tenga media="print". Esto también le permitirá ajustar la salida impresa final del gráfico en sí, por ejemplo, agrandarla.

Answer 5

Encontró una solución al usar html2canvas. Primero asigne el contenedor div para tener id como "theChart".

<div class="box" id="theChart"> 
    <div id="placeholder"></div> 
</div> 

Ahora podemos crear una imagen:

html2canvas($('#theChart')).then(function(canvas) { 
    image = canvas.toDataURL("image/png"); 
    document.location.href=image; 
}); 

Esto también va a resolver el problema cuando canvas.toDataURL() no hace que las etiquetas del eje.