¿Cómo usar Highcharts con princeXML?

Question

Estoy evaluando princexml, y es muy, muy bueno hasta el momento. Un pequeño problema sin embargo. ¿Hay alguna manera de guardar un gráfico generado por Highcharts en princexml, en el navegador?

Entiendo que necesito crear el gráfico como una imagen, en un lienzo, pero no estoy seguro de cómo alimentar el gráfico a princexml. ¿Algunas ideas?

Answer 1

Una cosa que puede hacer es simplemente alimentar el SVG generado por HighCharts al príncipe.

Un problema que tendrá con esta solución es que IE8 no generará SVG, sino VML, que el príncipe no puede procesar. Es posible que pueda alimentar su javascript directamente a Prince, pero todavía tenemos que probar esta solución.

Editar:

De hecho, me acabo de probar la alimentación de Prince con el código JavaScript que generaría el SVG ... pero no hubo suerte, por lo que estamos atascados con alimentándolo SVG pre-renderizados. Podría tener que hacerlo desde el lado del servidor usando un tiempo de ejecución de JavaScript.

Answer 2

Trabajo en DocRaptor (un archivo HTML a PDF API, utilizando Príncipe XML para la representación PDF) y que acaba de publicar un post sobre la adición de Highcharts a PDF:

Adding Highcharts to PDFs

Básicamente, sólo tiene que utilice nuestro motor de JavaScript (que es distinto del motor de JavaScript de Prince, y se ejecuta antes de que le entreguemos el proceso a Prince) y deshabilite las animaciones en el código que representa sus gráficos.

Answer 3

El motor de JavaScript de PrinceXML no parece lo suficientemente potente como para hacer gráficos con componentes como Highcharts.

Así que lo que he hecho es ejecutar mi página en PhantomJS para que se ejecute el JS y cree los elementos SVG en el DOM y luego alimentar el resultado a PrinceXML.

Asegúrese de desactivar animaciones lo contrario va a imprimir la trama 0 de la misma:

Highcharts.setOptions({ 
 
       plotOptions: { 
 
        series: { 
 
         animation: false //Animations prevent proper PDF generation of charts! 
 
        } 
 
       } 
 
      });