Highcharts uses phantomjs to export images,

Highcharts uses phantomjs to export images,
Highcharts uses phantomjs to export Images

Highcharts uses phantomjs to export Images

Description

When using Highcharts, a powerful icon component, you must always export the drawn icon as an image and download it to your local device. Highcharts provides the export function. You only need to import the exporting. js file to find the export button in the upper-right corner of the chart. This basically satisfies our needs in most cases. However, the original export request is sent to the Highcharts server for conversion. In many cases, we do not want to expose our data information to them, therefore, we must complete the conversion service on our own server.

Step 1: phantomjs

The download file of Highcharts contains an exporting-server folder, which is a series of conversion solutions provided by Highcharts, including java, phantomjs and php. Here, we will only describe the nodejs + phantomjs solution.

What is phantomjs?

Phantomjs can be seen as a browser without gui, and its kernel is also webkit. We generally use it to load webpages to parse dom and obtain data, or use it to perform webpage operations. After downloading phantomjs and decompressing it, copy the phantomjs folder in the exporting-server folder to the decompressed root directory. And execute the command

1	phantomjs ./phantomjs/highcharts-convert.js -host 127.0.0.1 -port 3003

After the above code is executed, a server is enabled and listening to port 3003. This server is used to receive the chart data we sent and finally return the generated image path to us.

Step 2: Get svg data and send it to nodejs Server

Browser code:

1234567891011121314151617

Var obj = {infile: $ ('# iner '). highcharts (). getSVG (), constr: "Chart", // Chart type outfile: "E: // chart.png" // file path to be stored}; $. ajax ({url: "http: // localhost: 3000/highchartsConvert", type: 'post', dataType: 'json', data: {data: json. stringify (obj )}}). done (function (rData) {download (rData); // rData is the path of the returned image. If the conversion is successful, like the value of outfile, // The download method is to pass the file name or path to the background, and then nodejs implements the file download function, which is omitted here });

Nodejs end:

12345678910111213141516171819202122232425

App. post ("/highchartsConvert", function (req, res, next) {var reqData = JSON. parse (req. body. data); // send to the phantomjs conversion server var options = {hostname: "localhost", port: "3001", path: "", method: "POST", headers: {"Content-Type": 'application/json; charset = UTF-8 ', "Content-Length": reqData. length }}; var req = http. request (options, function (ress) {ress. on ('data', function (data) {res. send (data) ;}); req. write (reqData + "\ n"); req. end ();});

Summary

The entire conversion process goes through two servers. First, the chart data is sent to the nodejs end and then forwarded to the phantomjs server. The intermediate node is used for some verification.
The following lists the parameters that can be passed in:

• Infile: svg code or options of the chart
• Outfile: path + File Name of the output image
• Constr: Chart type
• Width: the width of the chart rendered in phantomjs.
• Height: the height of the chart rendered in phantomjs.
• Callback: the chart is executed after rendering in phantomjs.

For more information, see
RENDER CHARTS ON THE SERVER
IMPROVED IMAGE EXPORT WITH PHANTOMJS

Author: foreverpx
Link to the original article: Highcharts uses phantomjs to export Images