Zingchart 无法正确绘制超过 10 列的 CSV

Question

场景：

我需要从具有固定列数 (37) 的 CSV 中绘制 Zingchart 中的数据。此 CSV 有一个 header 将定义图表的图例。

问题：

如果我在 header 中定义的元素数量少于 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 | 分隔符在 header 中包含元素，事情就开始出错了。理想情况下，文件应如下所示：

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.In CSV 对象，您需要添加 horizontal-labels:true 以设置允许 ZingChart 从您的数据集中提取适当的标签。在您的例子中，第二行包含每个系列的标签。

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

请点击此处：http://plnkr.co/edit/jQ0WuMsRBgEwV6s0fKlN?p=preview

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

Zingchart 无法正确绘制超过 10 列的 CSV

Zingchart doesn't plot correctly a CSV with more than 10 columns

html

javascript

charts

zingchart