5

设想：

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

问题：

如果我在标题中定义的元素数量小于 10（包括 X - Axis 名称），那么一切都很好。前九列有一个适当的图例，其他列使用默认命名Series XX。链接到要点

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

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|||||||||||

但随后输出完全混乱。链接到要点

我在本地运行的图形的 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>

问题：

我究竟做错了什么？

4

1 回答 1

6

我发现 JSON 存在一些问题。

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

  1. 绘图对象内不再需要文本“%v”。这实质上为每个系列分配了一个标签，但设置 Horizo​​ntal-labels:true 可以解决这个问题。

  2. 我已将 scale-y 对象中的小数增加到 2 而不是 0，因此 scale-y 似乎没有重复值。您还可以使用指数符号，如下所示：http ://www.zingchart.com/docs/design-and-styling/formatting-numbers/?q=customizable%20number%20formats

  3. 我假设您的 dat 文件中的第一列值是 UNIX 时间戳？这些值直接使用 JavascriptDate对象进行转换，因此 `new Date(1218604835) 实际上会返回 1970 年 1 月 14 日星期三的日期。如果它们确实是 UNIX 时间戳，则需要将这些值乘以 1000，以便 new Date( 1218604835000) 将于 2008 年 8 月 12 日星期二返回。

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

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

于 2016-05-19T17:42:06.683 回答