可视化的日历事件。算法与最大宽度布局事件事件、宽度、算法、布局

2023-09-10 23:01:11 作者:你變平常了

我需要你们的帮助与算法(它会在与JavaScript客户端开发,但其实并不重要,我最感兴趣的算法本身)铺设的日历事件,使得每个事件中具有最大宽度。请看下面的图片:

Y轴是时间。因此,如果测试事件开始于中午(例如),仅此而已相交,它需要整个100%的宽度。 每周评论相交翻滚YMCA和安娜/阿米莉亚,但后两者不交叉,因此它们都填补了50%。 TEST3,TEST4和TEST5都相交,所以最大宽度为每个33.3%。但TEST7是66%,因为Test3的是33%的固定的(见上文),因此它需要所有可用的空间,这是66%。

我需要一个算法如何打好这一点。

在此先感谢

解决方案 在想无限电网只是一个左边缘。 每个事件是一个单元宽,高度和垂直位置是基于开始时间和结束时间的固定。 尝试将每个事件的最左一列,没有它相交的任何较早的事件在该列中。 然后,当事件的每个连接的组被放置,它们的实际宽度将被用于该集团的最大列数的1 / n。 您也可以扩大最左侧和右侧使用任何剩余空间。事件

///选择左,每一个事件的合适的岗位,这样有没有重叠。 ///该算法在步骤3中。 无效LayoutEvents(IEnumerable的<事件>事件) {     VAR列=新的名单,其中,名单,其中,活动>>();     日期时间? lastEventEnding = NULL;     的foreach(VAR EV在events.OrderBy(EV => ev.Start).ThenBy(EV => ev.End))     {         如果(ev.Start> = lastEventEnding)         {             PackEvents(列);             columns.Clear();             lastEventEnding = NULL;         }         布尔放在= FALSE;         的foreach(列中的VAR COL)         {             如果(!col.Last()。CollidesWith(EV))             {                 col.Add(EV);                 放置= TRUE;                 打破;             }         }         如果(!放)         {             columns.Add(新名单,其中,事件> {EV});         }         如果(lastEventEnding == NULL || ev.End> lastEventEnding.Value)         {             lastEventEnding = ev.End;         }     }     如果(columns.Count大于0)     {         PackEvents(列);     } } ///设置左右位置在连接组的每个事件。 ///该算法在步骤4。 无效PackEvents(名单<列表<事件>>列) {     浮动为numColumns = columns.Count;     INT iColumn = 0;     的foreach(列中的VAR COL)     {         的foreach(在山坳VAR EV)         {             INT COLSPAN = ExpandEvent(EV,iColumn,列);             ev.Left = iColumn /为numColumns;             ev.Right =(iColumn +合并单元格)/为numColumns;         }         iColumn ++;     } } ///检查多少列的情况下可以扩展到,而不会碰撞 ///其他事件。 ///步骤5的算法中。 INT ExpandEvent(事件EV,INT iColumn,名单,其中,名单,其中,活动>>列) {     INT COLSPAN = 1;     的foreach(在columns.Skip VAR COL(iColumn + 1))     {         的foreach(在山坳VAR EV1)         {             如果(ev1.CollidesWith(EV))             {                 返回COLSPAN;             }         }         COLSPAN ++;     }     返回COLSPAN; }

编辑:现在进行排序,而不是假定它们的排序事件,

EDIT2:现在扩大了活动的权利,如果有足够的空间

I need your help with an algorithm (it will be developed on client side with javascript, but doesn't really matter, I'm mostly interested in the algorithm itself) laying out calendar events so that each event box has maximum width. Please see the following picture:

java 日历可视化练习

Y axis is time. So if "Test event" starts at noon (for example) and nothing more intersects with it, it takes the whole 100% width. "Weekly review" intersects with "Tumbling YMCA" and "Anna/Amelia", but the latter two are not intersecting, so they all fill up 50%. Test3, Test4 and Test5 are all intersecting, so max width is 33.3% for each. But Test7 is 66% since Test3 is 33% fixed (see above) , so it takes all available space , which is 66%.

I need an algorithm how to lay this out.

Thanks in advance

解决方案

Think of an unlimited grid with just a left edge. Each event is one cell wide, and the height and vertical position is fixed based on starting and ending times. Try to place each event in a column as far left as possible, without it intersecting any earlier event in that column. Then, when each connected group of events is placed, their actual widths will be 1/n of the maximum number of columns used by the group. You could also expand the events at the far left and right to use up any remaining space.

/// Pick the left and right positions of each event, such that there are no overlap.
/// Step 3 in the algorithm.
void LayoutEvents(IEnumerable<Event> events)
{
    var columns = new List<List<Event>>();
    DateTime? lastEventEnding = null;
    foreach (var ev in events.OrderBy(ev => ev.Start).ThenBy(ev => ev.End))
    {
        if (ev.Start >= lastEventEnding)
        {
            PackEvents(columns);
            columns.Clear();
            lastEventEnding = null;
        }
        bool placed = false;
        foreach (var col in columns)
        {
            if (!col.Last().CollidesWith(ev))
            {
                col.Add(ev);
                placed = true;
                break;
            }
        }
        if (!placed)
        {
            columns.Add(new List<Event> { ev });
        }
        if (lastEventEnding == null || ev.End > lastEventEnding.Value)
        {
            lastEventEnding = ev.End;
        }
    }
    if (columns.Count > 0)
    {
        PackEvents(columns);
    }
}

/// Set the left and right positions for each event in the connected group.
/// Step 4 in the algorithm.
void PackEvents(List<List<Event>> columns)
{
    float numColumns = columns.Count;
    int iColumn = 0;
    foreach (var col in columns)
    {
        foreach (var ev in col)
        {
            int colSpan = ExpandEvent(ev, iColumn, columns);
            ev.Left = iColumn / numColumns;
            ev.Right = (iColumn + colSpan) / numColumns;
        }
        iColumn++;
    }
}

/// Checks how many columns the event can expand into, without colliding with
/// other events.
/// Step 5 in the algorithm.
int ExpandEvent(Event ev, int iColumn, List<List<Event>> columns)
{
    int colSpan = 1;
    foreach (var col in columns.Skip(iColumn + 1))
    {
        foreach (var ev1 in col)
        {
            if (ev1.CollidesWith(ev))
            {
                return colSpan;
            }
        }
        colSpan++;
    }
    return colSpan;
}

Edit: Now sorts the events, instead of assuming they is sorted.

Edit2: Now expands the events to the right, if there are enough space.