Power BI Deneb Vega甘特图改造问询：添加滚动条与里程碑

一、添加仅日程区域的底部滚动条 #

要实现仅日程区域滚动、任务列表固定的效果，核心是把任务列表和日程区域拆分为两个独立视图容器，通过滚动信号控制日程容器的横向偏移：

1. 在Vega的signals中定义滚动控制信号，用于驱动日程区域的水平位移：

   "signals": [
     {
       "name": "xScroll",
       "value": 0,
       "bind": {"type": "scroll", "orient": "horizontal", "min": 0, "max": 1200}
     }
   ]
   

2. 拆分视图为两个group容器：
   • 第一个group承载任务列表（Y轴标签），设置固定宽度且关闭裁剪，保证列表不随滚动移动；
   • 第二个group作为日程滚动容器，设置剩余宽度，开启横向滚动，并通过translate绑定滚动信号：

     "marks": [
       {
         "type": "group",
         "name": "task-list",
         "width": 160,
         "clip": false,
         "marks": [/* 原任务列表的文本标记代码 */]
       },
       {
         "type": "group",
         "name": "schedule-container",
         "x": 160,
         "width": {"signal": "width - 160"},
         "scroll": "horizontal",
         "translate": [{"signal": "xScroll"}, 0],
         "marks": [/* 原日程条、时间轴等标记代码 */]
       }
     ]
     

3. 调整时间轴的domain范围或横向内边距，确保日程区域有足够的横向空间供滚动。

二、添加里程碑元素 #

里程碑可通过新增特殊标记（如菱形、圆点）实现，步骤如下：

1. 在数据集中新增里程碑数据，示例结构：

   "data": [
     // 原有任务数据...
     {
       "name": "milestones",
       "values": [
         {"task": "项目启动", "date": "2024-01-01"},
         {"task": "中期验收", "date": "2024-03-20"},
         {"task": "最终交付", "date": "2024-06-30"}
       ]
     }
   ]
   

2. 新增symbol类型标记，绑定里程碑数据并设置样式：

   {
     "type": "symbol",
     "from": {"data": "milestones"},
     "encode": {
       "enter": {
         "y": {"scale": "y", "field": "task"},
         "x": {"scale": "x", "field": "date"},
         "shape": {"value": "diamond"},
         "size": {"value": 180},
         "fill": {"value": "#c0392b"},
         "tooltip": {"signal": "{'里程碑': datum.task, '日期': datum.date}"}
       }
     }
   }
   

3. 若需要里程碑标签，可再新增text标记，绑定相同数据并调整位置偏移：

   {
     "type": "text",
     "from": {"data": "milestones"},
     "encode": {
       "enter": {
         "y": {"scale": "y", "field": "task"},
         "x": {"scale": "x", "field": "date", "offset": 12},
         "text": {"field": "task"},
         "fontSize": {"value": 12},
         "align": {"value": "left"}
       }
     }
   }
   

内容的提问来源于stack exchange，提问作者jean racine