Question

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

但是，我希望允许用户点击左箭头/右箭头按钮（上一个/下一个按钮的想法），而不是通过鼠标坐标突出显示的数据点，而当用户点击按钮，突出显示的圆圈将向左/向右移动。

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

Dygraphs是否提供开箱即用的功能，还是需要为此构建自己的功能？如果有原生支持，你能指点我一个例子吗？如果我必须手动执行此操作，您是否可以让我知道如何以编程方式突出显示属于特定X轴刻度的数据点？（我使用日期/时间x轴）。

这里是小提琴代码

$(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返回所有可见数据点的数组。

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上的数据点之间导航？

1 个答案: