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>

Dygraphs网站上的

See here for further examples of step plots

进度：

我专注于我在the source code of dygraph.js中找到的方法：findClosestPoint()。不幸的是，它在可见画布上（我认为）对点进行线性（强力）搜索，但它会这样做。所以我需要解决这个问题：

什么叫它，
我应该使用哪些来电者
如何附加回调

Answer 1

你可以使用注释来体面地解决这个问题（http://dygraphs.com/annotations.html）

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

基本上你添加这样的anotations：

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

将在第一行的开头设置为2 .. 然后你可以得到一个1的seconf行长度和另一个anotation，依此类推：

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

据我所知，这不是当你将线悬停时，但这与你认为使用dygraph一样接近。其他选项是收听mousemove并使用图形上方的div来基于鼠标坐标/图形坐标正确定位，但这是更多的代码。

修改好吧，我知道如果有很多点紧密在一起看起来很可怕。您可以在悬停时显示和隐藏注释：Updated fiddle

我使用jQuery来选择注释，如果许多点具有相同的标题，也会更改文本以便更容易地选择它。如果不使用jQuery，可以通过其他方式手动进行选择。

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"); } });

并且还使用循环创建注释数组，因此代码不是太多。

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

1 个答案: