向Legend Dypraphs添加其他数据

时间:2017-04-21 08:59:39

标签: dygraphs

我看到了https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png关于在当前数据中添加额外数据的问题。有没有办法在标签/图例中显示这些附加数据和数字数据?

1 个答案:

答案 0 :(得分:1)

您的代码错误,因为您试图以相同的方式使用其他帖子中的代码,而没有意识到差异。下一次,尝试调试更多的代码,在寻找失败方面做一些努力。

你说你绘制辅助[x.idx]时未定义。如果您只是执行console.log(x),您会注意到x是时间戳值,一个整数,因此您无法获得正确的索引以在数组中查找其他数据。

如果看到dygraphs API,则可以使用函数 getRowForX(xVal)来查找与x值对应的行号。所以我在值formatter中使用了这个函数来获取正确的索引来访问数组中的其他数据。

我修改了您的代码,我认为它的工作方式与您相同。下面是您的代码段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>