Highcharts Exporting pictures using Phantomjs

Highcharts Exporting pictures using Phantomjs

? Highcharts Exporting pictures using Phantomjs

Describe

When using this powerful icon component with Highcharts, you must at some point want to export the drawn icon to a picture and download it locally. Highcharts itself provides the export function, only need to import the Exporting.js file, you can find the Export button in the upper right corner of the chart. This has largely met our needs for most of the situation. But this original to export is to send the request to the Highcharts server to convert, many times we do not want to expose our data information to them, so we have to complete the conversion service on our own server.

Step One: Phantomjs

Highcharts download file has a Exporting-server folder, which is Highcharts provides a series of conversion schemes, with Java,phantomjs and PHP. Here, only the NODEJS+PHANTOMJS scheme is described.

What is PHANTOMJS?

Phantomjs can be seen as a browser without a GUI, and his kernel is also webkit, which we typically use to load Web pages to parse the DOM and fetch data, or to use him to make a Web page. After downloading the PHANTOMJS and extracting it, copy the Phantomjs folder in the Exporting-server folder to the root directory after the decompression. and execute the command

1	Phantomjs./phantomjs/highcharts-convert.js-host127.0.0.1-port3003

After executing the above code, a server is opened and 3003 ports are monitored. This server is used to receive the chart data we send, and eventually we will put the generated picture path back to us.

Step two: Get the SVG data and send it to the NODEJS server side

Browser-side code:

1234567891011121314151617

varobj = {infile:$ (' #container '). Highcharts (). Getsvg (), Constr:"Chart",//Chart typeOutFile"E://chart.png" //file path required for storage};$.ajax ({URL:"Http://localhost:3000/highchartsConvert", type:' POST ', DataType:' JSON ', data: {data:JSON. stringify (obj)}}). Done ( function(rData) {Download (rData);//rdata is the return picture path, if the conversion succeeds, the same as the value of outfile The //download method is to pass the file name or path to the background, and then nodejs to implement the download function, omitting});

Nodejs End:

12345678910111213141516171819202122232425

App.post ("/highchartsconvert", function(req,res,next) {varReqdata =JSON. Parse (Req.body.data);//Send to PHANTOMJS conversion server varoptions = {hostname:"localhost", Port:"3001", Path:"", Method:"POST", headers: {"Content-type":' Application/json;charset=utf-8 ',"Content-length": Reqdata.length}};varreq = http.request (options, function(ress) {Ress.on (' Data ', function(data) {res.send (data); }); }); Req.write (reqdata+"\ n"); Req.end ();});

Summarize

The entire conversion process took two servers, first sending the chart data to the Nodejs side and then forwarding it to the PHANTOMJS server. There is a connection between the middle and node because some verification is needed.
The following is a list of arguments that can be passed:

• InFile: SVG code for graphs or options
• OutFile: The path of the output image + file name
• CONSTR: Chart type
• Width: How wide the chart is rendered in Phantomjs
• Height: How high the chart is rendered in Phantomjs
• Callback: The chart executes after rendering is completed in PHANTOMJS

For more information, please refer to
RENDER CHARTS on the SERVER
Improved IMAGE EXPORT with PHANTOMJS

Article Foreverpx
Article original link: Highcharts use PHANTOMJS to export pictures

Highcharts Exporting pictures using Phantomjs