向图例 Dypraphs 添加额外数据

Question

我看到这个 post 关于将额外数据添加到当前数据中。有什么方法可以在 label/legend 中与数字数据一起显示这些附加数据吗？

Answer 1

您的代码是错误的，因为您试图以相同的方式使用另一个 post 的代码而没有意识到其中的差异。下一次，尝试更多地调试您的代码，努力查找故障。

你说你画辅助[x.idx]的时候得到undefined。如果你简单地做 console.log(x)，你会注意到 x 是时间戳值，一个整数，所以你不能获得正确的索引来在数组中寻找额外的数据。

如果您看到 dygraphs API，可以使用函数 getRowForX(xVal) 来查找与 x 值对应的行号。所以我在值格式化程序中使用了该函数来获取正确的索引以访问数组中的附加数据。

我已经修改了你的代码，我认为它正在按照你需要的方式工作。下面是片段 jsfiddle。我希望这对你有用。

var auxiliary = [
   'ID1',
    'ID2', 
      'ID3', 
    'ID4',
      'ID5', 
      'ID6'
  ];


new Dygraph(
document.getElementById("container"),
    [
        [new Date("2016/2/3"), [1,3,6], [4,4,4]],
        [new Date("2016/3/3"), [1,3,6], [3,3,3]],
        [new Date("2016/4/3"), [1,3,6], [1,1,1]],
        [new Date("2016/5/3"), [1,3,6], [2,2,2]],
        [new Date("2016/6/3"), [1,3,6], [6,6,6]],
        [new Date("2016/7/3"), [1,3,6], [5,5,5]]
    ],
{
    labels: [ "Date", "SD" , "Scatter"],
    showRangeSelector: true,
    customBars: true,
    drawPoints: true,
    series: {
        "SD" : {

        },
        "Scatter" : {
            customBars: false,
            strokeWidth: 0.0
        }
 },
    axes: {
        x: {
   valueFormatter: function() {
        index = this.getSelection();
    return auxiliary[index];
   }
  },
 includeZero: true
 }

}
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>
<div id="container" style="width:600px; height:300px;"></div>

向图例 Dypraphs 添加额外数据

add additional data to legend Dypraphs

dygraphs