我不能让Highcharts的phantomJs导出服务器工作 [英] I can't make Highcharts phantomJs export server work

问题描述

非常感谢提前。

我想设置一个phantomjs的Highcharts导出服务器。它应该接受json选项作为输入和输出jpeg图像文件。

这是我做的：

1. 我从这个repo下载服务器端的js代码： https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs


2. 我下载phantomjs 1.6.0



3. 运行

     phantomjs highcharts-convert.js -host 127.0.0.1  - 端口3001 
     

然后我尝试使用客户端代码在本网站： http://export.highcharts.com/demo 发送请求。我更改了表单动作的URL：

 < form id =exportFormaction =./method = POST> 
  

到：

 < form id =exportFormaction =http://0.0.0.0:3001method =POST> 
  

并点击Highcharts配置对象（JSON）。我得到的是这个消息：

失败的渲染：
SyntaxError：无法解析JSON字符串

由于可以在Highcharts服务器中正确处理相同的请求，所以错误必须位于我正在使用的Highcharts服务器端的js代码中。我还尝试了以下命令：

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

在 options.js中使用此代码：

  {
 infile：{
 xAxis：{
类：['Jan'，'Feb'，'Mar'，'Apr'，
'May'，'Jun'，'Jul'，'Aug'，
'Sep' '，'Nov'，'Dec'] 
}，
系列：[
 {
数据：[29.9,71.5,106.4,129.2，
 144.0,176.0 ，135.6,148.5，
 216.4,194.1,95.6,54.4] 
}] 
}，
回调：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
} 
  pre> 
 
 
它会成功生成png。
 
 
 
我猜Highchart在导出中没有太多的工作函数，我在highcharts-convert.js文件中发现了一些打字错误。有人可以帮我吗非常感谢。
解决方案
我终于解决了这个问题。我想在所谓的JSON字符串中存在误解。 Javascript导出服务器不接受任何真正的JSON字符串。一个真正的JSON字符串将引用所有字符串，有些东西就像
  {
value：[1 ，2,3]，
name：jack
} 
  
导出服务器接受的实际上是一个一些Javascript代码来创建一个Javascript对象，如：
  {
 value：[1,2,3]，
 name：jack
} 
  
这是因为服务器将使用此字符串作为生成的网页中的JavaScript代码的一部分。我写了一个小函数来将JSON字符串转换成这种格式并将其传递给服务器，它终于可以工作。
  var getUnQuotedJsonString = function（str）{
 return str.replace（/\w +：/ g，function（s，key）{
 return s.replace（// g，）; 
}）; 
} 
  
 
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:

I download server side js code from this repo: https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs
I download phantomjs 1.6.0
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.
解决方案
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, "");
  });
}


                        
这篇关于我不能让Highcharts的phantomJs导出服务器工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！