Question

情境：

我需要从具有固定列数的CSV中绘制Zingchart中的数据（37）。此CSV有一个标题，用于定义图表的图例。

问题：

如果我在标题中定义的元素数量少于10（包括X轴名称），那么一切都很好。前九列获得正确的图例，其他列使用默认的Series XX命名。 Link to the gist

在数据中，我尝试使用引号"和'，但它并没有改变行为。

Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|"Line_10"   "Line_11"   Line_12   Line_13   Line_14   Line_15   Line_16   Line_17   Line_18   Line_19   Line_20   Line_21   Line_22   Line_23   Line_24   Line_25   Line_26   Line_27   Line_28   Line_29   Line_30   Line_31   Line_32   Line_33   Line_34   Line_35   Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||

但是，只要我使用CSV |分隔符继续在标题中包含元素，就会出现问题。理想情况下，文件应该是这样的：

Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|Line_10|Line_11|Line_12|Line_13|Line_14|Line_15|Line_16|Line_17|Line_18|Line_19|Line_20|Line_21|Line_22|Line_23|Line_24|Line_25|Line_26|Line_27|Line_28|Line_29|Line_30|Line_31|Line_32|Line_33|Line_34|Line_35|Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||

然后输出完全搞砸了。 Link to the gist

我在本地运行的图表的HTML代码具有相同的结果：

<!DOCTYPE html>
<html>

<head>
  <script src="zingchart_2.3.2/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "zingchart_2.3.2/modules/";
  </script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    var myConfig = {
      "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": "zingchart_2.3.2/sample_5lines.dat",
        "separator": "|",
        "vertical-labels": true,
      },
      "plot":{
          "line-width":2,
          "active-area":true,
          "shadow":0,
          "exact":true,
          "marker":{
              "size":4
          },
          "hover-marker":{
              "size":3
          },
          "preview":true,
          "spline":false,
          "text":"%v",
      },
      "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,
          "label":{
              "margin-top":100
          },
          "tick":{
              "line-color":"black",
              "line-width":"2px",
              "size":8,
          },
          "transform":{
            "type":"date",
            "all":"%d/%M/%Y\n%H:%i:%s",
          }
      },
      "scale-y":{
          "zooming":true,
          "decimals":0,   
      },
      "tooltip":{
        <!--"js-rule":"myfunc()",-->
        "shadow":0,
        "font-color":"#000",
        "text":"%t - %k<br><br>%v<br>Hz",
        "border-radius":"5px",
        "sticky":true,
        "timeout":500,
        "decimals":6
      }
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 500,
      width: "100%"
    });
  </script>
</body>

</html>

问题：

我做错了什么？

Answer 1

我发现JSON有几个问题。

1.在CSV对象中，您需要添加horizontal-labels:true以设置允许ZingChart从数据集中提取相应的标签。在您的情况下，第二行包含每个系列的标签。

绘图对象内部不再需要文本“％v”。这基本上为每个系列分配了一个标签，但是设置horizontal-labels：true会修复此问题。
我已将scale-y对象的小数增加到2而不是0，因此scale-y似乎没有重复值。您还可以使用指数表示法，如下所示：http://www.zingchart.com/docs/design-and-styling/formatting-numbers/?q=customizable%20number%20formats
我假设你的dat文件中的第一列值是UNIX时间戳？这些值使用Javascript Date对象直接转换，因此`new Date（1218604835）实际上将返回1970年1月14日星期三的日期。如果它们确实是UNIX时间戳，则值需要乘以1000所以新的日期（1218604835000）将返回2008年8月12日星期二。

Plnkr：http://plnkr.co/edit/jQ0WuMsRBgEwV6s0fKlN?p=preview

如果您需要任何进一步的帮助，请告诉我们！ - ZingChart会员。

Zingchart没有正确绘制超过10列的CSV

1 个答案: