如何在浮动图上的点之间导航

How to navigate between points on flot chart?

本文关键字：之间 导航      更新时间：2024-02-06

我想构建某种前向/后向寻呼机，在图表上的点之间导航，突出显示当前点。

我见过的最接近的例子是类似谷歌金融图表上的新闻传奇，https://www.google.ca/finance?q=goog&ei=AD6dUvjOLMi0iAL9Uw

（你可以点击每一篇新闻文章/事件，它会在图中跳到图上的相关时间点）

Flot能做到这一点吗？有什么建议吗？谢谢

这里有一个真正的快速示例来演示解决这个问题的一种方法。单击上一个/下一个按钮时，它会高亮显示系列中的上一个或下一个点，并调整x轴，使高亮点保持在屏幕中心。

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更有意义。

相关文章：