我不能让Highcharts的phantomJs导出服务器工作 [英] I can't make Highcharts phantomJs export server work
问题描述
非常感谢提前。
我想设置一个phantomjs的Highcharts导出服务器。它应该接受json选项作为输入和输出jpeg图像文件。
这是我做的:
- 我从这个repo下载服务器端的js代码: https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs
- 我下载phantomjs 1.6.0
-
运行
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中使用此代码
:
{
pre>
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
}
它会成功生成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屋!