Как перемещаться между точками на карте флота?

Question

Я хотел бы создать своего рода плейер вперед/назад, который будет перемещаться между точками на моем графике, выделяя текущую точку.

Ближайший пример, который я видел что-то похожее на новости легенды о Google финансов диаграммы, https://www.google.ca/finance?q=goog&ei=AD6dUvjOLMi0iAL9Uw

(вы можете нажать каждую новости статьи/событие, и он будет прыгать на графике в соответствующий момент времени на графике)

Можно ли это сделать с Flot и любыми предложениями о том, как это сделать? Благодаря!

Answer 1

Вот очень быстрый пример, чтобы продемонстрировать один подход к этой проблеме. При нажатии на предыдущую/следующую кнопку он выделяет предыдущую/следующую точку в серии и настраивает xaxis, чтобы точка с подсветкой оставалась центрированной на экране.

var highlightPoint = 15; // our first highlight 
var xmin = 10, xmax = 20; // some arbitrary slice of series 

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

$('#prevPoint').click(function(){ 
    plot.unhighlight(0,highlightPoint); // unhighlight previous selection 
    highlightPoint -= 1; // move to left 
    xmin = highlightPoint - 5; // adjust xaxis 
    xmax = highlightPoint + 5; 
    plot.getOptions().xaxes[0].min = xmin; // set xaxis into options 
    plot.getOptions().xaxes[0].max = xmax; 
    plot.setupGrid(); // refresh chart with new xaxis 
    plot.draw(); // redraw 
    plot.highlight(0,highlightPoint); //highlight new point 
}); 

Имеет смысл рассматривать Fiddle here.