0

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

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

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

时间线

有小费吗？

4

2 回答 2

2

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

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

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

编辑：公式要获得刻度的位置，您必须将时间线的宽度除以刻度数减一。假设我们有一个 400px 的时间线，有 5 个刻度（计算时间线远端的那些）。我们从 0 开始计算刻度。要获得刻度的位置，我们只需将 400 除以 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

  • 依此类推，在 x 300 处打勾 3，在 x 400 处打勾 4（最右边）。

如果上面的公式返回小数怎么办？圆它！用户几乎不会注意到一个像素的差异（尽管我认为这样的整数运算会自动舍入）。

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

如果你幸运的话，我可能很快就会为你制作一个工作原型；-)

于 2009-08-25T17:19:38.490 回答
1

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

如果您需要做更多，Flex Charts 还允许您绘制它们。这可能就是你要找的。

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

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

于 2009-08-25T15:17:08.440 回答