Vega-Lite甘特图定制：添加任务名列+typ=4里程碑异形显示

1. 添加任务名列作为额外列 #

要在项目名称旁展示任务名，可通过新增文本标记层实现，将任务名文本固定绘制在甘特图条形的左侧区域：

• 在现有Vega-Lite配置的layer数组中添加一个text类型的标记层
• 将text字段绑定到数据集里的任务名字段（假设字段名为task_name）
• 把x坐标设为时间轴左侧的固定值，避免与条形重叠，同时设置文本右对齐保证和项目名对齐

示例代码片段：

{
  "mark": {"type": "text", "align": "right", "dx": -10},
  "encoding": {
    "y": {"field": "project_name", "type": "nominal", "axis": null},
    "x": {"value": 0}, // 可根据实际布局调整该固定值
    "text": {"field": "task_name", "type": "nominal"},
    "color": {"value": "#333"}
  }
}

如果需要更紧凑的合并显示，也可以在数据转换阶段生成项目名+任务名的复合字段：

"transform": [
  {"calculate": "datum.project_name + ' | ' + datum.task_name", "as": "project_task"}
],

之后将y轴字段设为project_task即可在同一列展示两者。

2. 为typ=4的里程碑设置不同形状 #

通过条件编码控制标记形状，精准区分typ=4的里程碑：

• 在标记的shape编码中使用condition属性
• 设定判断条件为datum.typ === 4，对应指定形状（比如"triangle"）
• 为其他类型的里程碑设置默认形状（比如"circle"）

示例代码片段：

{
  "mark": {"type": "point"},
  "encoding": {
    "shape": {
      "condition": {"test": "datum.typ === 4", "value": "triangle"},
      "value": "circle"
    },
    // 其他编码配置（x轴时间、y轴项目名等）
  }
}

如果里程碑使用tick等其他标记类型，可对应调整标记的形状或样式属性，核心逻辑都是通过条件判断筛选typ=4的条目做差异化展示。

内容的提问来源于stack exchange，提问作者a.huber