javascript - 使用 Dygraph 很难指向非常接近的时间序列点

标签 javascript dygraphs

我有一个数据的 Dygraph 散点图,其中我绘制了紧密分组的日期时间戳的实例。鼠标指针离 X 轴越远,就越难突出显示这些点。可以突出显示它们,但是在非常紧密地放大之前它会非常紧张。

JSFiddle

例如,为了查看与沿 4 或 6 或 8 RPM 线的点相关联的点数据,您必须在 X 轴和 Y 轴上非常非常紧密地放大。我希望我的用户能够仅指向给定点以获取关联数据,而不必每次都放大。有什么方法可以减少必要的接近度,或者减少从给定点获取点数据的指向精度?

工作示例: 使用上面列出的 fiddle ,当一直缩小时,尝试将鼠标悬停在出现的位置:X: Aug 12, Y: 6(它的实际数据是:[ new Date("2012/08/02 09:49:15"), 6.000000, 44190],。请注意,几乎不可能突出显示该点,因为时间上接近且 Y 值较小的点要多得多可能会突出显示,即使您将光标直接放在该点上也是如此。

它看起来像 .findClosestPoint可能是我要找的。但是阅读 comments in the latest build对于它我不再那么确定:

/**
 * Given canvas X,Y coordinates, find the closest point.
 *
 * This finds the individual data point across all visible series
 * that's closest to the supplied DOM coordinates using the standard
 * Euclidean X,Y distance.
 *
 * @param {number} domX graph-relative DOM X coordinate
 * @param {number} domY graph-relative DOM Y coordinate
 * Returns: {row, seriesName, point}
 *

 @private
*/

这似乎暗示 Canvas 坐标是以编程方式提供的,而不是通过鼠标指针提供的,但这只是一个猜测。另外,我还没有找到任何使用它的例子。有什么方法可以让选择点不那么棘手吗?

最佳答案

默认情况下,dygraphs 突出显示每个系列的对应点(即出现在输入数据同一行中的点)。这通常是您想要的时间序列图,但正如您所指出的,对于散点图,在散点图中,同一序列中可能有多个点具有相同的 x 值,它会分解。

highlightSeriesOpts选项通常用于设置当前突出显示的系列的样式,其副作用是将选择逻辑更改为“按欧几里得距离最近”,而不是“按 x 值最近”。所以你可以通过将这个选项设置为一个空对象来达到你想要的效果:

new Dygraph(data, div {
  highlightSeriesOpts: {}
})

这是带有修复程序的演示的更新版本:JSFiddle

关于javascript - 使用 Dygraph 很难指向非常接近的时间序列点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26981304/

相关文章:

Javascript 日期格式 - 将月份显示为 xx

javascript - 为什么没有官方 JavaScript 引用?

javascript - Dygraph - 我们如何通过发送一组数据点而不是整个数据系列来更新图表

javascript - dygraphs:处理数百万个点

charts - 可以隐藏系列但在图例中显示值(value)吗?

javascript - 如何禁用除选定字段之外的所有表单字段

javascript - Business Catalyst - 如何从架构元内容中删除井号

javascript - 将 R dygraphs 用于分数时间点?

r - knitr 中的 dygraph 不工作

javascript - Node js setInterval 和 nohup 的进程产生问题