Javascript 从Zingchart图形导出png缩略图不适用于CSV数据

我想生成用Zingchart制作的图形的

.png

缩略图。这是为了生成我创建的多个图形的索引，我希望这样做而不必在浏览器中打开实际的图形

我发现了这篇文档：

我想这就是我想要的

所以我试过了

  phantomjs /home/eballes/Work/backup/zingchart_test/zingchart_2.3.2_phantomjs/zingchart-phantomjs.min.js -width=800 -height=600 -dataurl=/home/eballes/Work/t/test_output/html/example.html -filename=out.png

但是，该命令只是挂在那里，不产生输出，也不消耗CPU。如果我使用

strace

执行，我看到的是轮询/超时的无限循环：

poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 31) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 1) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 0) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 0) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 0) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 34) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 31) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 1) = 0 (Timeout)
poll([{fd=5, events=POLLIN}, {fd=6, events=POLLIN}], 2, 0) = 0 (Timeout)

在命令行中，

-dataurl

参数应该是一个JSON文件。

example.html

的内容如下：

    {
      "globals":{
          "font-family":"Arial"
      },  
      "legend":{
          "layout":"4x",
          "adjust-layout":true,
          "align":"center",
          "background-color":"none",
          "shadow":0,
          "border-width":0,
          "vertical-align":"bottom",
      },  
      "type": "line",
      "utc":true, 
      "csv": {
        "url": "csv/data.csv",
        "separator": "|",
        "vertical-labels": true,
        "horizontalLabels": true
      },  
      "plot":{
          "line-width":2,
          "active-area":true,
          "shadow":0,
          "exact":false,
          "marker":{
              "size":4
          },
          "hover-marker":{
              "size":3
          },
          "preview":true,
          "spline":false,
          "maxNodes":100,
          "maxTrackers":2000,
          "marker": {
              "rules": [
                {
                    "rule": '%i%10 > 0',
                    "visible": false,
                }
              ],
          },
      },
      "plotarea":{
          "adjust-layout":1,
          "width":"100%",
          "height":200,
          "position":"0% 0%",
          "margin-top":60,
          "margin-right":60,
          "margin-left":70,
          "margin-bottom":105
      },
      "preview":{
          "visible":true,
          "height":40,
          "position":"0 370",
          "margin-top":10,
          "margin-bottom":15
      },
      "scale-x":{
          "format":"%v",
          "zooming":true,
          "step":"1hour",
          "max-items":24,
          "label":{
              "margin-top":100
          },
          "tick":{
              "line-color":"black",
              "line-width":"2px",
              "size":8,
          },
          "item":{
            "font-size":10
          },
          "transform":{
            "type":"date",
            "all":"%d/%M/%Y\n%H:%i:%s",
          }
      },
      "scale-y":{
          "zooming":true,
          "decimals":2,
          "label":{
            "text": "Label",
          },
      },
      "tooltip":{
        "shadow":0,
        "font-color":"#000",
        "text":"%t - %k<br><br>%v<br>Hz",
        "border-radius":"5px",
        "sticky":true,
        "timeout":500,
        "decimals":6
      }
    }

{
“全球”：{
“字体系列”：“Arial”
},  
“传奇”：{
“布局”：“4x”，
“调整布局”：正确，
“对齐”：“居中”，
“背景色”：“无”，
“影子”：0，
“边框宽度”：0，
“垂直对齐”：“底部”，
},  
“类型”：“行”，
“utc”：正确，
“csv”：{
“url”：“csv/data.csv”，
“分隔符”：“|”，
“垂直标签”：正确，
“水平标签”：正确
},  
“情节”：{
“线宽”：2，
“活动区域”：正确，
“影子”：0，
“精确”：错误，
“标记”：{
“尺寸”：4
},
“悬停标记”：{
“尺寸”：3
},
“预览”：没错，
“样条线”：假，
“最大节点数”：100，
“maxTrackers”：2000年，
“标记”：{
“规则”：[
{
“规则”：“%i%10>0”，
“可见”：假，
}
],
},
},
“绘图区域”：{
“调整布局”：1，
“宽度”：“100%”，
“高度”：200，
“职位”：“0%0%”，
“利润率最高”：60，
“保证金权利”：60，
“左边距”：70，
“保证金底部”：105
},
“预览”：{
“可见”：真实，
“高度”：40，
“位置”：“0 370”，
“利润率最高”：10，
“保证金底部”：15
},
“scale-x”：{
“格式”：“%v”，
“缩放”：没错，
“步骤”：“1小时”，
“最大项目数”：24，
“标签”：{
“保证金上限”：100
},
“勾选”：{
“线条颜色”：“黑色”，
“线宽”：“2px”，
“大小”：8，
},
“项目”：{
“字号”：10
},
“转变”：{
“类型”：“日期”，
“全部”：“%d/%M/%Y\n%H:%i:%s”，
}
},
“scale-y”：{
“缩放”：没错，
“小数”：2，
“标签”：{
“文本”：“标签”，
},
},
“工具提示”：{
“影子”：0，
“字体颜色”：“#000”，
“文本”：“%t-%k

%v
Hz”，
“边界半径”：“5px”，
“粘性”：没错，
“超时”：500，
“小数”：6
}
}

如果JSON中直接包含数据，则可以正常工作并生成

.png

文件。但是，对于CSV文件，它似乎不起作用，在

strace

中，我没有看到任何打开

CSV

文件的尝试

我更新到

zingchart_2.4.0_phantomjs

，结果相同

---

我错过了什么？有没有更好的方法从CSV文件生成

.png

缩略图

为了调试这个问题，您使用的是什么版本的phantom？@nardecky我明天会确认，因为我没有带工作笔记本电脑，但我使用的phantomjs可用，根据链接是版本2.1.1+dfsg-2 amd64。为了以防万一，我将在官方网站上试用开箱即用的二进制文件。@nardecky是的，它是phantomjs 2.1.1版。我试过使用官方网站上的二进制文件，结果是一样的。@nardecky我对帖子做了一些编辑。。。我刚刚发现只有当有CSV链接时才会出现问题（如我的示例中所示）。在其他图中，我直接将数据放在JSON中，它可以工作。然而，在

strace

上，我看不到zingchart试图打开CSV文件的任何尝试……我最初的好奇心倾向于新幻影版本的问题。感谢您澄清构建编号并澄清我的顾虑。幻影代码不支持CSV文件上载。您可以编写自己的幻影服务，但这需要做一些工作。