Javascript 两个带有同步十字线的“动态图”_Javascript_Dygraphs

Javascript 两个带有同步十字线的“动态图”

javascript

Javascript 两个带有同步十字线的“动态图”,javascript,dygraphs,Javascript,Dygraphs,我使用自定义选项verticalCrosshair实现了两个动态图：此处为true：当我将鼠标悬停在某个特定x点的任何图形上时，我希望所有图形都显示该点的垂直十字线。到目前为止，我已经能够在顶部图形gs[0]上实现如下操作： highlightCallback: function(e, x, pts, row) { var sel = gs[0].getSelection(); gs[1].setSelection(sel); }, 当我将鼠标悬停在底部图表上时，不会发生任何事情。

我使用自定义选项verticalCrosshair实现了两个动态图：此处为true：

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

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

当我将鼠标悬停在底部图表上时，不会发生任何事情。如何使用for loop over all graphs对其进行泛化？

您应该将动态图对象放入一个数组中，并在highlightCallback中对其进行循环，更新所有动态图（生成事件的动态图除外）中的选择

一个复杂的问题是highlightCallback没有获取动态图对象作为参数。这是API中的一个疏忽，我希望在dygraphs 2.0中修复它。设置highlightCallback时，可以通过在闭包中捕获相关的动态图对象来解决此问题

请参阅获取一些灵感。

您应该将动态图对象放入数组中，并在highlightCallback中循环，更新所有动态图中的选择，而不是生成事件的动态图

请参阅以获取一些灵感。

我通过以下方法解决了此问题：

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

请参见以下图表和来源：

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

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

请参见以下图表和来源：

我已经有了这两个功能，并且工作了将近一年。我没有编写代码，只是做了一些编辑，以使labelFollow按我喜欢的方式工作。我跟随最初的作者，将代码塞进了库中，而不仅仅是动态图选项参数中的回调，但我没有将垂直十字线片段放入插件中，因为我还不知道如何编写它们。然而，labelFollow的东西在插件legend.js中，因为这是原作者所做的

至于verticalCrosshair选项的代码，我是从显然值得尊敬的DJCOMXA--。只要搜索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上的工作，只需转到。然后你可以点击页面最底部的链接，看到一个显示垂直十字线和labelFollow的图表。我相信，labelFollow是我或多或少复制的wootwoot的作品。类似地，用customLabel_Crosshair替换该图URL中的同步图表，您将看到一个更漂亮的示例，我认为我提供的链接数量有限，因此URL重建说明也有限

我现在不知道我是如何得到原始labelFollow代码的。不管怎样，我找到了一些对legend.js的修改，当然还有wootwoot对dygraph-options-reference.js的修改，并对它们进行了编辑

我必须说，我在danvdk在dygraph.js顶部提供的gmail地址写信给他，建议这些更改的实用性，但由于我不是俱乐部的成员，所以被拒绝了

关于从danvk提供的动态图同步示例同步演示链接中获取灵感，请谨慎地从中获取灵感。现在它让我觉得很舒服

试一下：在页面加载时，转到四个图中的任何一个，在中间的一个瘦区段，从左到右进行缩放点击拖动；然后双击

发生了什么事？您放大了，轨迹垂直填充了图形，但需要一点填充——自动缩放。然后，双击放大后，一切看起来都和以前一样。啊。。。但事实并非如此。现在转到这四个图中的任何一个，重复第一步。。。在同一个瘦点放大，每个图形的数据恰好相同。请注意，缺少自动垂直缩放。在你重新加载页面之前，这是一个永久性的条件。

我已经安装了这两个功能，并且工作了将近一年。我没有编写代码，只是做了一些编辑，以使labelFollow按我喜欢的方式工作。我跟随最初的作者，将代码塞进了库中，而不仅仅是动态图选项参数中的回调，但我没有将垂直十字线片段放入插件中，因为我还不知道如何编写它们。然而，labelFollow的东西在插件legend.js中，因为这是原作者所做的

至于verticalCrosshair选项的代码，我是从显然值得尊敬的DJCOMXA--。只要搜索垂直十字线，你就会找到t 该脚本中添加了两个小片段

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

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

我必须说，我在danvdk在dygraph.js顶部提供的gmail地址写信给他，建议这些更改的实用性，但由于我不是俱乐部的成员，所以被拒绝了

关于从danvk提供的动态图同步示例同步演示链接中获取灵感，请谨慎地从中获取灵感。现在它让我觉得很舒服

试一下：在页面加载时，转到四个图中的任何一个，在中间的一个瘦区段，从左到右进行缩放点击拖动；然后双击

发生了什么事？您放大了，轨迹垂直填充了图形，但需要一点填充——自动缩放。然后，双击放大后，一切看起来都和以前一样。啊。。。但事实并非如此。现在转到这四个图中的任何一个，重复第一步。。。在同一个瘦点放大，每个图形的数据恰好相同。请注意，缺少自动垂直缩放。在重新加载页面之前，这是一个永久条件。

谢谢，我注意到默认签名中的行参数，请参见下面的答案。谢谢，我注意到默认签名中的行参数，请参见下面的答案。酷！谢谢您的演示。@danvk，请注意，今天我还实现了legendFollow选项，它使图例像这样浮动和翻转：。您是否有兴趣将请求拉入danvk/DYGRAPES/master？我可以根据你的反馈进行调整。很酷的演示，@danvk，我也投票支持在主库中包含verticalCrosshair和legendFollow选项。我很乐意看到一个拉动请求。有关指南，请参见dygraphs.com/changes.html。我建议在extras目录中实现这个插件。酷！谢谢您的演示。@danvk，请注意，今天我还实现了legendFollow选项，它使图例像这样浮动和翻转：。您是否有兴趣将请求拉入danvk/DYGRAPES/master？我可以根据你的反馈进行调整。很酷的演示，@danvk，我也投票支持在主库中包含verticalCrosshair和legendFollow选项。我很乐意看到一个拉动请求。有关指南，请参见dygraphs.com/changes.html。我建议在extras目录中将其作为插件实现。@danvk，我已经在你的synchronize.html页面上解决了这个问题。请参阅@danvk，我已通过synchronize.html页面修复了此问题。看见