Funcionalidad de exportación de HighCharts

Question

¿Alguien sabe de una forma de crear automáticamente un gráfico SVG y exportar una versión de imagen JPEG o PNG de la tabla de Highacarts al mismo tiempo (preferiblemente en $(document).ready)?

Quiero mostrar la versión SVG para detectar y poner el PNG o JPEG en un DIV oculto para la impresión.

Gracias por adelantado.

Answer 1

Mi solución crea automáticamente una imagen equivalente del SVG de cada gráfico en mi página/tablero (en su estado inicial), sin la necesidad de que un usuario los exporte individualmente. Esto permite que todos los gráficos y gráficos de HighCharts en una página impriman correctamente, sin necesidad de interacción del usuario.

La razón por la que las páginas con gráficos de HighCharts no imprimen correctamente es porque los gráficos se realizan con SVG y las versiones actuales de los navegadores comunes no admiten la impresión de SVG (escrito enero de 2012). Por lo tanto, mi solución será irrelevante cuando lo hagan.

Mi solución se acerca a esta limitación actual del navegador:

En primer lugar, enmendé los Highcharts exporting.js Archivo para activar automáticamente la rutina que generalmente se activa cuando el usuario elige exportar una imagen manualmente.

A continuación, es importante tener en cuenta que cuando un usuario elige exportar una imagen, su solicitud se envía como una solicitud de encabezado de la página general.

Por lo tanto, mi enmienda a la función de exportación no publica los datos de HighCharts directamente, sino que primero publica el SVG y otros datos necesarios que HighCharts necesita Divs en mi página/tablero.

Cada DIV que recibe la solicitud incluye un archivo PHP cuya rutina json_encodes Los datos de publicación que recibe de la rutina de exportación y luego lo publica en HighCharts Export Server como su propio encabezado.

Entonces, debido a que la publicación se desencadena de ese div, el resultado se envía directamente a ese div, como un encabezado del script PHP en ese div.

Una vez que se envió de regreso a esa div, guardé la imagen, hice la impresión DIV solo a través de CSS y la única salida HTML de ese DIV fue la etiqueta IMG con la ruta del archivo de imagen.

Actué todos los divs para ser poblados con sus imágenes usando $(document).ready.

Una nota para cualquier otra persona que intente esto es que la configuración de mi desarrollo y mi servidor en vivo difería, lo que significa que tenía que stripslashes El JSON en uno de ellos antes de enviarlo a Highcharts.

Las siguientes publicaciones apuntarán a cualquier otra persona que intente hacer esto en la dirección correcta.

Guardar la imagen del gráfico de Google en el archivo usando PHP

Publicar a un div:

Formulario de publicación en jQuery and Populed Div - Broken en IE