在Flex / AS3中创建从日期到日期的时间轴

Question

我需要在两个给定日期之间创建一个时间轴，即： 2006-01-20 - 2009-02-14

必须在给定宽度上绘制时间轴（可以更改），即： 的 600px的

但我需要添加标记，一年开始，一年中有4次（每个73天aprox）：

任何提示？

Answer 1

我会从头开始创建一个组件，可能基于Canvas组件，并通过将组件的宽度除以行数（或类似的东西 - 我不是最好的数学）来添加行和标签

当用户将鼠标悬停在时间轴的某个部分上时，您还可以实现一个功能，以弹出一个包含信息的框。

您想要的是图表轴没有的时间轴特定功能。我不会妥协使用不为此特定任务构建的组件，并引入错误或不优雅的解决方法。 Flex是为了快速扩展而构建的，那么为什么不利用这个功能呢？

编辑：公式 要获得刻度线的位置，您必须将时间线的宽度除以刻度数减1。假设我们有一个400px的时间轴，有5个刻度（计算时间轴远端的那些）。我们计算从0开始的刻度。我们所要做的就是将刻度线的位置除以4除以4并将其乘以刻度数。

在代码中：

for (var i : int = 0; i < num_ticks; i++) {
    ticks[i].x = timeline_width / num_ticks-1 * i;
    // do some drawing of the ticks
}

我会引导你完成它。

• 在最左边的刻度线0处，x 0. 400/4 * 0 = 0

• 在最左边附近的刻度线1位于x 100. 400/4 * 1 = 0

• 勾选2，中间位于x 200. 400/4 * 2 = 200

• 依此类推，Tick 3在x 300和4在x 400（最右边）。

如果上述公式返回小数，该怎么办？圆了！用户几乎不会注意到一个像素的差异（虽然我认为这样的操作在整数上自动循环）。

您可以通过执行timeline_width-margin（必须是偶数）在时间轴右侧添加边距，并将每个刻度的x位置递增一半。这将在每一侧增加一些空间并使刻度居中。

如果你很幸运，我可能会尽快为你制作一个原型; - ）

Answer 2

我认为Flex Charting包中的轴允许您默认进行此类格式化。

如果您需要做更多，Flex图表也允许您绘制它们。那可能就是你要找的东西。

链接：http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_02.html

当然，如果你愿意，你可以自己从头开始自己做，但是你花在这上面的时间可能不会抵消专业版的价格（要获得图表组件，除非你已经有了）。