I can't make Highcharts phantomJs export serve

问题:

Big thanks in advance.

I want to set up a phantomjs Highcharts export server. It should accept json options as input and output jpeg image files.

Here is what I do:

1. I download server side js code from this repo: https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs
2. I download phantomjs 1.6.0

3. run

   phantomjs highcharts-convert.js -host 127.0.0.1 -port 3001
   

Then I tried to use client code in this site: http://export.highcharts.com/demo to send request. I changed the form action url from this:

    <form id="exportForm" action="./" method="POST">

to this:

    <form id="exportForm" action="http://0.0.0.0:3001" method="POST">

and clicked 'Highcharts config object (JSON)'. All I get is this message:

Failed rendering: SyntaxError: Unable to parse JSON string

Since the same request can be processed correctly in Highcharts server, the error must be in the Highcharts server side js code I'm using. I also tried following command:

phantomjs highcharts-convert.js -infile options.js \
                                -outfile chart.png -scale 2.5 -width 300

With this code in options.js:

{
  infile: {
            xAxis: {
                        categories:['Jan','Feb','Mar','Apr',
                                    'May','Jun','Jul','Aug',
                                    'Sep','Oct','Nov','Dec']
                },
            series:[
                {
                    data:[29.9,71.5,106.4,129.2,
                          144.0,176.0,135.6,148.5,
                          216.4,194.1,95.6,54.4]
                }]
          },
          callback: function(chart){
          chart.renderer
               .arc(200,150,100,50,-Math.PI,0)
               .attr({fill:'#FCFFC5',stroke:'black','stroke-width':1})
               .add();
          },
 constr: "Chart",
 outfile: "//tmp//chart.png"
}

And it generates the png successfully.

I guess Highchart didn't put much work in the exporting functions and I found some typo in the highcharts-convert.js file. Can anyone help me on this? Thanks a lot.

回答1:

I finally solved the problem. I guess there is mis-understanding in the so called "JSON" string. The Javascript export server does not accept any real "JSON" string. A real "JSON" string would have all strings quoted, some thing like

 {
       "value": [1,2,3],
       "name": "jack"
 }

What the export server accepts are actually a piece of Javascript code to create a Javascript object, like:

 {
       value: [1,2,3],
       name: "jack"
 }

This is because the server will use this string as part of the Javascript code in the generated webpage. I wrote a small function to convert JSON string into this format and pass it to the server, it finally works.

var getUnQuotedJsonString = function (str) {
  return str.replace(/"\w+":/g, function(s, key) {
    return s.replace(/"/g, "");
  });
}

回答2:

I got that same error when I tried to send in a JSON string that was longer than what my server hosting the highcharts exporter WAR file would accept. Check your message length parameter in your server. Make sure it is long enough to hold the request sent. Now, since you do not mention what export server you are using (java or PHP) I would imagine you did not actually set up the web front end for the export server and you just have the headless command line export set up (phantomJS + some highcharts js files). To use the exporting server for use in the front end (like when a user clicks on the export buttons on the web page) you also need to set up Java or PHP.

回答3:

This is because the Phantoms HTTP server which is started by

phantomjs highcharts-convert.js -host ... -port ...

expects the parameters send in JSON format. Please read, the documentation, parapgraph 'start as a webserver'

Out of curiosity... what typo did you found?

回答4:

I wrote a similar function to solve this for PHP if anyone is looking to remove the quotes from the result of json_encode -

function unQuote($str){
return preg_replace_callback('/"\w+":/',
                        function ($match){
                             return str_replace('"', '', $match[0]);
                         }, 
                         $str );
}