Question

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

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

（您可以点击每篇新闻文章/活动，它会在图表中跳转到图表上的相关时间点）

可以使用Flot和任何有关如何执行此操作的建议吗？谢谢！

Answer 1

这是一个真实的快速示例，演示了解决此问题的方法。在上一个/下一个按钮上单击它会突出显示系列中的上一个/下一个点，并调整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 here。

如何在flot chart上的点之间导航？

1 个答案: