Question

假设你有一个500像素宽的flot图，它在x轴上有100个刻度。显然，这默认会非常拥挤。 “导航”插件可以帮助解决这个问题。例如，如果要将其一次限制为仅10个刻度，则可以执行以下操作：

$.plot(...).zoom({'amount': total_ticks / 10});

但是，我不知道如何制作它，以便在首次绘制图形时，它默认显示 last 十（最右边的十个），而不仅仅是从中间随机设置十个。此外，虽然我给出的例子假设有100个刻度，但我事先并不会真正知道这个数字，所以如果它是100个刻度，那么我希望默认情况下看到刻度91到100。如果它是108个刻度，那么我希望默认情况下看到刻度99到108。我怎么能这样做？

Answer 1

在初始缩放时，只需将center选项设置为图表的宽度：

$.plot($('#graph_with_zoom'), [data], plot_options).zoom({
    'amount': total_ticks / 5,
    'center': { left: 400, top: 0 }
});

更新了小提琴here。

Answer 2

flot提供Selection and zooming示例。你可以选择部分范围，它会重绘你的图形。

Flot：默认情况下缩放到最右侧

2 个答案: