两个带有同步十字准线的“dygraphs”

Question

我已在此处实施了两个dygraphs自定义选项verticalCrosshair : true：

https://rawgit.com/danielkrizian/dygraphs/master/tests/synchronize-Crosshair.html

当我将鼠标悬停在特定x点的任何图形上时，我希望所有图形都显示该点的垂直十字准线。 到目前为止，我已经能够将这个工作放在顶部图形（gs[0]）上，如下所示：

highlightCallback: function(e, x, pts, row) {
  var sel = gs[0].getSelection();
  gs[1].setSelection(sel);
},

当我将鼠标悬停在底部图表上时，没有任何反应。如何在所有图表上使用for循环来概括它？

Answer 1

你应该将dygraphs对象放在一个数组中并在highlightCallback中循环它，更新除生成事件的所有dygraph中的选择。

一个复杂因素是highlightCallback没有将dygraph对象作为参数。这是API的疏忽，我希望在dygraphs 2.0中修复。您可以通过在设置highlightCallback时在关闭中捕获相关的Dygraph对象来解决此问题。

请参阅synchronize demo获取一些灵感。

Answer 2

我用以下方法解决了这个问题：

highlightCallback: function(e, x, pts, row) {
  for (var j = 0; j < gs.length; j++) {
    gs[j].setSelection(row);
  }
},

请参阅图表和来源：

https://rawgit.com/danielkrizian/dygraphs/master/tests/synchronize-Crosshair.html

Answer 3

我已经拥有这两个功能并且工作了将近一年。我没有创建代码，只是做了一些编辑，努力让labelFollow位以我喜欢的方式工作。我跟着原作者并将代码填入库中，而不仅仅是在Dygraph（）选项参数中的回调，但是我没有将verticalCrosshair片段放在插件中，因为我不知道如何写下那些。但是，labelFollow的东西在插件legend.js中，就像原作者所做的那样。

至于verticalCrosshair选项的代码，我是从明显引人注目的DJCOMXA --- http://www.pixeltradr.com/dygraphs/dygraph.js得到的。只需搜索“verticalCrosshair”，您就会发现该脚本中添加了两个小小的片段。

要完成verticalCrosshair选项，当然还需要添加到dygraph-options-reference.js，如下所示：

  // Credit due to DJCOMXA.
 "verticalCrosshair": {
    "default": "false",
    "labels": ["Interactive Elements"],
    "type": "boolean",
    "description": "Shows vertical line on highlighted point."
  },

现在对于labelFollow的另一个问题，为了证明labelFollow的先前工作，只需转到the Google group即可。然后，您可以单击该页面最底部的链接，查看显示verticalCrosshair和labelFollow的图表（我相信，后者是我或多或少复制的“wootwoot”的作品）。同样，用“customLabel_Crosshair”替换该图表的URL中的“synchronize-Charts”，你将被带到一个更漂亮的例子（我认为我可以提供的链接数量有限，因此URL重建指示）。

我现在无法弄清楚我是如何获得原始labelFollow代码的。无论如何，我通过wootwoot找到了对legend.js（当然还有dygraph-options-reference.js）的一些修改并进行了编辑。

我必须说我在dygraph.js顶部提供的gmail地址写信给danvdk，以表明这些变化的效用，并且由于我不是俱乐部的成员而被反弹。

关于从Dygraphs同步示例（danvk提供的“同步演示”链接）中获取灵感，请谨慎从中获取灵感。现在它给了我适合。

试试这个：在页面加载时转到四个图形中的任何一个，在中间的一个瘦小部分进行放大（点击从左向右拖动）;然后双击。

发生什么事了？您放大并且曲线垂直填充图形，但是稍微填充---自动缩放。然后在双击时缩小一切似乎与之前一样。啊......但事实并非如此。现在移动到四个图形中的任何一个并重复第一步......放大同一个瘦的点（这些图形的数据恰好相同）。请注意，缺少自动垂直缩放。在您重新加载页面之前，这是一个永久性条件。