如何以编程方式在 Dygraph 上的数据点之间导航？

Question

我想提供一个与鼠标悬停事件非常相似的功能，该功能将根据鼠标的坐标突出显示数据点。

但是，我不想通过鼠标坐标突出显示数据点，而是允许用户单击 Left-arrow/Right-arrow 按钮（一种 Previous/Next 按钮的想法），并且作为用户单击按钮，突出显示的圆圈将移动 left/right。

This Flot fiddle 是我想在 Dygraphs 中实现的导航功能示例。

Dygraphs 是否提供开箱即用的此功能，还是我需要为此构建自己的功能？如果有本地支持，你能给我举个例子吗？如果我必须手动执行此操作，您能告诉我如何以编程方式突出显示落在特定 X 轴刻度上的数据点吗？（我正在使用 date/time x 轴）。

这是fiddle代码

$(function() {

    var d1 = [];
    for (var i = 0; i < 31; i += 1) {
        d1.push([i, Math.random() * 10]);
    }

    var highlightPoint = 15;
    var xmin = 10, xmax = 20;


    var plot = $.plot("#placeholder", [ d1 ],
               {
                   xaxis:{min: xmin, max: xmax}
                });
    plot.highlight(0,highlightPoint);

    $('#prevPoint').click(function(){
        plot.unhighlight(0,highlightPoint);
        highlightPoint -= 1;
        xmin = highlightPoint - 5;
        xmax = highlightPoint + 5;
        plot.getOptions().xaxes[0].min = xmin;
        plot.getOptions().xaxes[0].max = xmax;
        plot.setupGrid();
        plot.draw();  
        plot.highlight(0,highlightPoint);
    });

    $('#nextPoint').click(function(){
        plot.unhighlight(0,highlightPoint);
        highlightPoint += 1;
        xmin = highlightPoint - 5;
        xmax = highlightPoint + 5;
        plot.getOptions().xaxes[0].min = xmin;
        plot.getOptions().xaxes[0].max = xmax;
        plot.setupGrid();
        plot.draw();  
        plot.highlight(0,highlightPoint);        
    });

});

Answer 1

Dygraphs 有一个 .setSelection() 和 .getSelection() 方法，允许我们以编程方式突出显示特定数据点。

此外，Dygraphs 具有 .layout_.points 和 returns 所有可见数据点的数组。

Example fiddle 关于如何以编程方式浏览可见数据点。

该示例的一个缺陷是当突出显示的数据点到达可见数据点的末尾时没有自动平移。

g = new Dygraph(

  // containing div
  document.getElementById("graphdiv"),
  "Date,Temperature\n" +
  "2008-05-01,65\n" +
  "2008-05-02,70\n" +
  "2008-05-03,74.2\n" +
  "2008-05-04,75\n" +
  "2008-05-05,70\n" 
);

function navigateThroughDygraphDatapoints(navigationDirection) {
  var moveRight = (navigationDirection != null && navigationDirection === 'right');
  var currentSelectedDatapoint = g.getSelection();

  if (currentSelectedDatapoint < 0) {
    currentSelectedDatapoint = g.layout_.points[0][0].idx;
  }
  if (moveRight) {
    currentSelectedDatapoint++;
  } else {
    currentSelectedDatapoint--;
  }

  g.setSelection(currentSelectedDatapoint);
}

document.getElementById("left").addEventListener("click", function() {var dir = "left"; navigateThroughDygraphDatapoints(dir);},false);
document.getElementById("right").addEventListener("click", function() {var dir = "right";navigateThroughDygraphDatapoints(dir);},false);

如何以编程方式在 Dygraph 上的数据点之间导航？

How to programmatically navigate between data points on a Dygraph?

dygraphs