Display annotation of length of a plotted line when hovered over

问题

Using dygraphs I'll be plotting a series that looks like a staircase: consecutive horizontal and vertical lines. (With varying width and constant height).

I would like to have an annotation or label show the length of a horizontal line when it is hovered over. How might this be done? Perhaps there is a way of:

providing a callback that gets called when a line segment is hovered over
use that callback to add a temporary annotation (with the documented annotations feature)

Or perhaps there's a better way?

Example:

<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 on the Dygraphs site

Progress:

I am focusing around a method I found in the source code of dygraph.js: findClosestPoint(). Unfortunately it does a linear (brute force) search of points, on the visible canvas (I think), but it'll do. So I need to work out:

What calls it,
Which of those callers are what I should tap into
How to attach a callback to it

回答1:

You can use annotate to solve this decently I think (http://dygraphs.com/annotations.html)

Here is a jsfiddle with possible solution: Example fiddle

Basically you add anotations like this:

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

that would set a 2 at the start of the first line.. then you can have a 1 for the length of the seconf line with another anotation there and so on:

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

I understand that this is not when you hover the line but this is as close as you get using dygraphs I think. Other option is to listen to mousemove and use a div above the graph to position correctly based on mouse coords/graph coords but that is a lot more code.

Edit: Ok, I understand if there are many points tight together that would look horrible. You can show and hide the annotation on hover like this: Updated fiddle

I used jQuery to select the annotation also changed the text a bit to select it more easily if many points have same title. You can prob do the selection manually in other ways if you don't use 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");
        }
        });

And also create the annotation array using a loop so it is not too much code.

来源：https://stackoverflow.com/questions/38774363/display-annotation-of-length-of-a-plotted-line-when-hovered-over

标签

javascript

dygraphs