Cómo renderizar Highcharts de JavaScript en el lado del servidor usando Node.js

Cómo renderizar Highcharts de JavaScript en el lado del servidor usando Node.js

Considere el siguiente contexto, ya que ese es el que me encontré hace un par de meses. Estaba trabajando en un gran proyecto de Symfony que se ejecuta en PHP 7, como todos sabemos, las bibliotecas para crear gráficos en PHP son realmente horribles. Entonces, la opción era simplemente crear los gráficos utilizando una solución alternativa en JavaScript, ya que los gráficos solo deberían aparecer en el navegador cuando el usuario usa la aplicación. Desafortunadamente, un par de meses después, requirieron la creación de informes en PDF que debían tener los mismos gráficos que se mostraban en el navegador (sí, genial, también necesito incrustarlos en archivos PDF). Por el conocimiento que tenía hasta ese momento, la situación era muy problemática.

Después de investigar un poco, descubrí que, afortunadamente, estaba usando Highcharts para crear los gráficos en el navegador, por lo que la solución ya existía para implementarla en el lado del servidor, por lo que tampoco necesitaría volver a escribir los gráficos en el servidor. side ya que el código de los gráficos en la interfaz debería ser similar.

En este artículo, te explicaré cómo renderizar fácilmente highcharts en su servidor usando Node.js y el módulo highcharts-export-server.

Requisitos

Suponemos que ya tienes Node.js instalado en su servidor.

Instalar el servidor de exportación Highcharts

La primera forma de utilizar highcharts-export-server es utilizarlo como módulo. Esto significa, escribir tu propio script, crear la versión de imagen de los gráficos de forma personalizada. En este caso, simplemente crearemos un script que usará código personalizado para generar los gráficos. La segunda forma es ejecutar el módulo como un servicio HTTP (como un servidor), por lo que las aplicaciones de terceros como la que está trabajando pueden simplemente hacer una solicitud a este servidor para obtener la imagen como respuesta.

Como primer paso, instale el módulo usando NPM con el siguiente comando:

npm install highcharts-export-server

La instalación tomará un rato, ya que esto instalará la biblioteca Highcharts y PhantomJS. Al instalar highcharts se te pedirá información sobre licencias y otros módulos, en nuestro caso, usaremos la versión gratuita, por lo que la respuesta a la mayoría de las solicitudes que hará, será respondida con un no.

Para obtener más información sobre el módulo highcharts-export-server, visita el repositorio oficial en Github aquí.

A. Uso de Highcharts Export Server como módulo

Hay varias formas de exportar tu gráfico utilizando el servidor de exportación de highcharts. Describiré los más útiles en este artículo:

Exportar como imagen PNG

En este ejemplo, crearemos el archivo index.js que se ejecutará con Node.js. Este archivo contiene la implementación básica del módulo de exportación highcharts, donde será importado junto con el módulo del sistema de archivos. Luego, inicializa el exportador (PhantomJS) y define las opciones del gráfico. El objeto chartOptions contiene la información que usas de costumbre para trazar el gráfico en la interfaz, las etiquetas, los datos, etc. Luego usa el método de exportación del chartExporter para ejecutar el renderizado del gráfico en el navegador headless (PhantomJS), cuando se renderice, el navegador activará la devolución de llamada que te permitirá obtener la información base64 de la imagen para almacenarla en un archivo :

// /index.js

// 1. Importar sistema de archivos y módulo de servidor de exportación Highcharts
const fs = require("fs");
const chartExporter = require("highcharts-export-server");

// Inicializar el exportador
chartExporter.initPool();
// El objeto de detalles del gráfico especifica el tipo de gráfico y los datos para trazar

// Por lo general, el mismo objeto que usas para configurar tus gráficos
// en la interfaz. Esto se utilizará para especificar el tipo de gráfico.
// y datos para trazar. Usaré un gráfico de barras, los mismos datos
// especificados en una de las demostraciones oficiales en el sitio web de HC
let chartOptions = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Fuente: Our Code World'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor: '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
};

// Exportar gráfico usando estas opciones
chartExporter.export({
    type: "png",
    options: chartOptions,
    // Por defecto, el ancho de las imágenes del gráfico es de 600
    // En este caso, queremos una gran imagen.
    width: 1200
}, (err, res) => {
    // Obtener los datos de la imagen (base64)
    let imageb64 = res.data;

    // Nombre de archivo de la salida. En este caso, escribiremos la imagen.
    // al mismo directorio del script de inicialización.
    let outputFile = "./output-chart.png";

    // Guarde los datos de la imagen en un archivo
    fs.writeFileSync(outputFile, imageb64, "base64", function (err) {
        if (err) console.log(err);
    });

    console.log("¡El gráfico se ha generado correctamente!");

    chartExporter.killPool();
});

Si ejecutas el script con Node.js usando:

node index.js

Se ejecutará el script, generando una salida de éxito, y la imagen output-chart.png, que en este caso con la información de este ejemplo se verá así:

Highcharts Export Server Result Node.js

La imagen ahora se puede incrustar donde desees, en el navegador, en un PDF, etc. 

Usar como módulo (exportar como archivo SVG)

Si deseas exportar el gráfico en formato SVG, también puedes hacerlo utilizando el módulo. Debes cambiar la propiedad de tipo usando SVG como valor y proporcionar el parámetro outfile también:

// /index.js

// 1. Importar sistema de archivos y módulo de servidor de exportación Highcharts
const fs = require("fs");
const chartExporter = require("highcharts-export-server");

//Inicializar el exportador
chartExporter.initPool();
// El objeto de detalles del gráfico especifica el tipo de gráfico y los datos para trazar

// Por lo general, el mismo objeto que usa para configurar tus gráficos
// en la interfaz. Esto se utilizará para especificar el tipo de gráfico.
// y datos para trazar. Usaré un gráfico de barras, los mismos datos
// especificado en una de las demostraciones oficiales en el sitio web de HC
let chartOptions = {
    // .. Chart Type, Data etc.
};

// Exportar gráfico usando estas opciones
// Exportar el gráfico como archivo SVG
chartExporter.export({
    type: "svg",
    outfile: "./output-file.svg",
    options: chartOptions
}, (err, res) => {
    console.log(`El gráfico se ha generado correctamente como SVG en ${res.filename}!`);

    chartExporter.killPool();
});

B. Uso de Highcharts Export como servicio

Ahora, la primera solución al usarla como módulo, es ideal para aplicaciones pequeñas, donde la función no se usaría demasiado en teoría. Sin embargo, si estás intentando crear un servicio en el que varias aplicaciones puedan interactuar con la creación de la imagen del gráfico, la mejor forma de hacerlo es ejecutar el módulo como servidor. Por lo tanto, debes instalar highcharts-export-server globalmente:

npm install highcharts-export-server -g

La instalación solicitará lo mismo que cuando se instala como módulo, licencias, instalación de PhantomJS, etc. Cuando finalice la instalación, deberías poder ejecutar el comando desde el terminal habilitándolo como servidor con el parámetro enableServer:

highcharts-export-server --enableServer 1 --host localhost --port 7801

Este comando básicamente iniciará el servidor con la configuración dada:

Highcharts Export Server

en este caso, la dirección sería http://localhost: 7801 , ya que estoy trabajando localmente. Si deseas ejecutar esto en un servidor en vivo, también deberá configurar el proxy inverso, Nginx, si deseas usarlo con un dominio específico.

Ahora, con esto, podrá renderizar los gráficos desde un servicio web. Ejecuta una simple solicitud application/json con los datos del gráfico a la dirección definida y la respuesta será una imagen del gráfico. El JSON que estamos enviando en la solicitud será el siguiente:

{
    "infile": {
        "title": {
            "text": "Steep Chart"
        },
        "xAxis": {
            "categories": [
                "Jan",
                "Feb",
                "Mar"
            ]
        },
        "series": [
            {
                "data": [
                    29.9,
                    71.5,
                    106.4
                ]
            }
        ]
    },
    "width": 1200
}

Puedes probarlo con curl, por ejemplo, el siguiente comando solicitará el gráfico con la información anterior y lo almacenará en el archivo output-file.png:

curl -H "Content-Type: application/json" -X POST -d "{ \"infile\": { \"title\": { \"text\": \"Steep Chart\" }, \"xAxis\": { \"categories\": [ \"Jan\", \"Feb\", \"Mar\" ] }, \"series\": [ { \"data\": [ 29.9, 71.5, 106.4 ] } ] }, \"width\": 1200 }" localhost:7801 -o output-file.png

La respuesta, en este caso, será:

Highcharts Output Server

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable