【问题标题】:I can't make Highcharts phantomJs export server work我无法让 Highcharts phantomJs 导出服务器工作
【发布时间】:2013-07-04 09:57:39
【问题描述】:

非常感谢。

我想设置一个 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 -port 3001
    

然后我尝试使用此站点中的客户端代码:http://export.highcharts.com/demo 发送请求。我从此更改了表单操作网址:

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

到这里:

    <form id="exportForm" action="http://0.0.0.0:3001" method="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: {
                        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"
}

它成功生成了png。

我猜 Highchart 没有在导出函数中做太多工作,我在 highcharts-convert.js 文件中发现了一些错字。谁可以帮我这个事?非常感谢。

【问题讨论】:

    标签: highcharts export phantomjs


    【解决方案1】:

    我终于解决了这个问题。我猜在所谓的“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, "");
      });
    }
    

    【讨论】:

    • 嗨,tuo,我尝试了这种格式{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) {}",constr:"Chart",outfile:"//tmp//chart.png"},但仍然无法正常工作。你能给我一个工作的例子吗?
    • 唐,您的字符串既不是有效的 JSON 字符串,也不是“用于创建对象的 Javascript 代码”。这是一个工作字符串:{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,176,135.6,148.5,216.4,194.1,95.6,54.4]}]},constr:" Chart",outfile:"//tmp//chart.png"} 可以尝试在JS中创建一个对象,使用JSON.stringify获取正确的JSON字符串。然后就可以使用我之前提供的函数将其转换成Highcharts导出服务器接受的格式了。
    • 感谢您的帮助。
    • 我刚刚尝试了这两个字符串,但似乎都不再起作用了。演示页面 (export.highcharts.com/demo) 似乎使用了完全不同的 POST 语法,但这似乎也不起作用。有什么想法吗?
    • 我尝试了演示页面中的字符串,上面两个 cmets 中的字符串,我收到 500 错误,响应为 Failed rendering: 我正在使用 Fiddler 进行测试和我的帖子标头是:用户代理:提琴手主机:127.0.0.1:3003 内容长度:227 内容类型:应用程序/json; charset=utf-8
    【解决方案2】:

    当我尝试发送比托管 highcharts 导出器 WAR 文件的服务器接受的长度更长的 JSON 字符串时,我遇到了同样的错误。检查服务器中的消息长度参数。确保它有足够长的时间来保存发送的请求。现在,由于您没有提及您使用的是什么导出服务器(java 或 PHP),我想您实际上并没有为导出服务器设置 Web 前端,而您只是设置了无头命令行导出(phantomJS + some highcharts js 文件)。要在前端使用导出服务器(例如当用户点击网页上的导出按钮时),您还需要设置JavaPHP

    【讨论】:

    • 感谢 wergeld。新的 PhantomJs 服务器不需要 Java 或 PHP。它相对较新。您可以找到文档here。我不知道它是如何工作的,但它确实可以在没有 Java 或 Batik 的情况下工作。
    【解决方案3】:

    这是因为

    启动的 Phantoms HTTP 服务器
    phantomjs highcharts-convert.js -host ... -port ...
    

    期望参数以 JSON 格式发送。请阅读documentation,段落'start as a webserver'

    出于好奇……你发现了什么错别字?

    【讨论】:

    • 有一个“length”拼写错误为“lenght”,这就是我现在能记住的全部了。
    • 谢谢,现在已修复。 here
    【解决方案4】:

    如果有人想从json_encode 的结果中删除引号,我为 PHP 编写了一个类似的函数来解决这个问题 -

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-04-18
      • 1970-01-01
      • 1970-01-01
      • 2011-04-24
      • 1970-01-01
      • 2017-11-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多