Cómo imprimir el gráfico de flot

¿Puede algún cuerpo ayudarme a averiguar cómo imprimir charts dynamics como ejemplo generado por flot? Intenté este pero está imprimiendo toda la página, pero solo quiero una porción de 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'); }); } 

Este artículo describe cómo copyr el canvas a un img normal que luego se puede imprimir o save fácilmente como una image.

La parte importante:

 img.src = canvas.toDataURL(); 

Vea la gran respuesta a continuación de Ignacio Correia para más detalles.

Inicie una nueva window con solo el gráfico o con CSS alternativo similar a lo que hace Google Maps cuando imprime.

Atención, esta publicación ha sido editada. Consulte todas las soluciones posibles.


De lo que he buscado y encontré, solo tiene 2 opciones o intenta imprimir el LONA, o EXPORTAR como una image o mi idea es separar la image del contenido e intentar imprimir solo el gráfico. Aquí hay una pregunta frecuente de Flot, ¿cómo se puede exportar la image? Pregunta número 3

P: ¿Puedo exportar el gráfico?

R: Puede tomar la image representada por el elemento canvas utilizado por Flot como PNG o JPEG (recuerde establecer un background). Tenga en count que no includeá nada que no esté dibujado en el canvas (como la leyenda). Y no funciona con excanvas que usa VML, pero podrías probar Flashcanvas.

SOLUCIÓN 1 – Exportar image:

Exportar image a la computadora y luego imprimirla

SOLUCIÓN 2 – FLOTO A LONA:

  • Guardar canvas como imágenes – Por Mozilla
  • Guardar como Image Flot Plugin
  • Pregunta relacionada: Impresión de problemas en IE8

SOLUCIÓN 3 – Mi propia printing modal

Esta no es la mejor solución, pero funciona, aquí hay una demostración:

  • Demostración normal de JSFIDDLE
  • Demostración en pantalla completa de JSFIDDLE

Pasos

  1. Cargar Fancybox
  2. Abra usando el MARCO EN LÍNEA el gráfico
  3. IMPRIMIR en callback después de mostrar
  4. Vuelva a cargar la página después de imprimir para networkingiseñar la página

Aquí está 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 pregunta relacionada se trata de exportar Flot a PDF, no sé si puede estar interesado: Exportar Flot a PDF

EDITAR – SOLUCIÓN DE TRABAJO Aquí hay una demostración funcional de cómo exportar la image: FLOT a IMAGE

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

Encontré una solución usando 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 image:

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

Esto también resolverá el problema cuando canvas.toDataURL() no represente tags de eje.