悬停时显示绘制线的长度注释

Question

使用 dygraphs 我将绘制一个看起来像楼梯的系列：连续的水平线和垂直线。（具有不同的宽度和恒定的高度）。

我想让注释或标签在悬停时显示水平线的长度。如何做到这一点？也许有一种方法：

提供在线段悬停时调用的回调
使用该回调添加临时注释（使用记录的注释功能）

或者也许有更好的方法？

示例：

<head><script  
    type="text/javascript" 
    src="http://dygraphs.com/dygraph-combined.js"></script>
</head>
<body>
    <div id="graphdiv"></div>
    <script type="text/javascript">
    var g = new Dygraph(document.getElementById("graphdiv"),
    [
        [0, 1],     // Starts at height 1, step width is 2
        [2, 2],     // step width is 1
        [3, 3],     // step width is 0.5
        [3.5, 4],   // step width is 0.25
        [3.75, 5],  // remainder is at height 5
    ],
    {
        stepPlot: true
    });
</script>
</body>

See here for further examples of step plots 在 Dygraphs 网站上

进度：

我关注的是我在 the source code of dygraph.js 中找到的方法：findClosestPoint()。不幸的是，它在可见的 canvas 上对点进行线性（蛮力）搜索（我认为），但它会这样做。所以我需要锻炼：

它叫什么，
我应该接听哪些来电者
如何为其附加回调

Answer 1

我认为你可以使用注释来解决这个问题(http://dygraphs.com/annotations.html)

这是一个带有可能解决方案的 jsfiddle：Example fiddle

基本上你添加这样的注释：

g.setAnnotations([
    {      
      series: "seriesX",
      x: 0,
      shortText: "2"
    },
    ...

这将在第一行的开头设置 2.. 然后你可以有一个 1 作为 seconf 行的长度，在那里有另一个注释等等：

...
{      
   series: "seriesX",
   x: 2,
   shortText: "1"
}
...

我知道这不是当您将鼠标悬停在线上时，但我认为这与您使用 dygraphs 时一样接近。另一种选择是听 mousemove 并使用图表上方的 div 根据鼠标 coords/graph 坐标正确定位，但这需要更多代码。

编辑： 好吧，我知道如果有很多点紧密地结合在一起看起来会很糟糕。您可以像这样在悬停时显示和隐藏注释：Updated fiddle

我使用 jQuery 到 select 注释也将文本稍微更改为 select 如果许多点具有相同的标题，它会更容易。如果您不使用 jQuery.

，您可以通过其他方式手动执行 selection

      g.updateOptions( {
        annotationMouseOverHandler: function(annotation, point, dygraph, event)
        {       
        var anno = $(".dygraphDefaultAnnotation[title='" + annotation.text +"']");
            //alert(annotation.text);
            anno.removeClass("annotationHidden");
        },
      annotationMouseOutHandler:function(annotation, point, dygraph, event)
        {
        var anno = $(".dygraphDefaultAnnotation[title='" + annotation.text +"']");
            //alert(annotation.text);
            anno.addClass("annotationHidden");
        }
        });

并且还使用循环创建注释数组，这样代码就不会太多。

悬停时显示绘制线的长度注释

Display annotation of length of a plotted line when hovered over

javascript

dygraphs