历史曲线图的展现和操作方式

过去我一直从事底层数据处理、整体系统架构设计、系统间接口等设计工作，极少涉及界面设计，几乎是没有经验。
最近，在设计一个小型监控系统时，如何展示历史性能数据，引发了一场同事间关于设计的讨论，下面将展示其设计的心路历程。

常见展示方式
历史性能数据的展示，最简单、最常见的方式如下图：

例程来自与开源项目 flot （ Attractive Javascript plotting for jQuery ）的 example 。

CA Wily Introscope
几年前我在 CA 学习时，记得其产品 Wily Introscope 在性能展示界面中有一个时间标尺，使用时间标尺拖动时，整个页面中的性能数据都随时间标尺左右移动，让使用者非常方便。当时就留下来极为深刻的印象。

左侧时间标尺的左右移动控制展示时间的结束时间点，右侧下拉列表控制显示的时间范围。 这是一个 Java Swing 编写的客户端程序。

Flot 中的时间标尺