【问题标题】:Create a timeline from date to date in Flex/AS3在 Flex/AS3 中创建从日期到日期的时间线
【发布时间】:2010-11-22 16:02:47
【问题描述】:

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

时间线必须在给定的宽度上绘制(可以更改),即: 600 像素

但我需要添加标记,一个是在一年的开始,另一个是一年中 4 次(大约每 73 天):

有什么建议吗?

【问题讨论】:

    标签: apache-flex actionscript-3 flex3 timeline


    【解决方案1】:

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

    如果您需要做更多事情,Flex Charts 还允许您绘制它们。这可能就是您正在寻找的。​​p>

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

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

    【讨论】:

    • 是的,我正在考虑使用图表,但没有找到在图表中显示该信息的方法。我现在就玩它。谢谢!。 (如果你知道类似的例子,那会很有帮助)
    • 嗯,主要和次要滴答声当然是可能的。如果您可以提供更多详细信息,我可以为您提供所需的帮助,但是从您显示的坐标轴来看,这应该很容易做到。
    • 我有一个加载了所有数据的 CartesianChart(我不需要显示系列)。但在明年 1 月 1 日之前,我无法看到如何仅显示年份(1 月 1 日)和 4 个标记。尝试使用 AxisRenderer,但我被卡住了。
    • 考虑在指定日期添加不可见的数据点,然后将其视为标记或类似的东西。
    【解决方案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位置增加一半。这将在每一侧添加一些空间并使刻度居中。

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

    【讨论】:

    • 是的,从头开始创建它的问题是您需要做很多公式才能根据像素宽度获得正确的时间位置。
    • 太棒了,我试试看,看起来很有趣。但是像 30 年这样的日期范围会发生什么?
    • 把很宽的时间线放在比它小的容器里。这样,时间线将在容器内滚动并带有滚动条。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-08-19
    • 1970-01-01
    • 1970-01-01
    • 2017-08-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多