如何在Vega-Lite甘特图中按完成百分比为任务分色？

要实现单个任务按完成百分比区分绿色（已完成）和橙色（未完成）的甘特图，核心是计算出任务完成部分的截止时间，再通过两个图层分别绘制两段条形。以下是完整实现代码：

{
  "data": {
    "values": [
      {"Description": "Task 1", "Start": "2023-01-05", "End": "2023-01-10", "Percentage complete": 0},
      {"Description": "Task 2", "Start": "2023-01-01", "End": "2023-01-15", "Percentage complete": 75},
      {"Description": "Task 3", "Start": "2023-01-01", "End": "2023-01-03", "Percentage complete": 100}
    ]
  },
  "transform": [
    // 计算完成部分的截止时间：基于总时长和完成百分比生成时间偏移
    {
      "calculate": "datetime(datum.Start, (datum.End - datum.Start) * datum['Percentage complete'] / 100)",
      "as": "CompletedEnd"
    }
  ],
  "layer": [
    // 已完成部分：绿色条形
    {
      "mark": {"type": "bar", "color": "#2ecc71", "size": 20},
      "encoding": {
        "y": {"field": "Description", "type": "ordinal", "stack": null},
        "x": {"field": "Start", "type": "temporal"},
        "x2": {"field": "CompletedEnd"}
      }
    },
    // 未完成部分：橙色条形，仅当完成率小于100%时显示
    {
      "mark": {"type": "bar", "color": "#f39c12", "size": 20},
      "encoding": {
        "y": {"field": "Description", "type": "ordinal", "stack": null},
        "x": {"field": "CompletedEnd", "type": "temporal"},
        "x2": {"field": "End", "type": "temporal"},
        "opacity": {
          "condition": {"test": "datum['Percentage complete'] < 100", "value": 1},
          "value": 0
        }
      }
    }
  ]
}

关键细节说明： #

• 时间计算逻辑：通过transform中的calculate语句，用任务总时长（End - Start）乘以完成百分比，得到已完成部分的时间偏移量，再叠加到任务开始时间上，生成已完成阶段的截止点CompletedEnd。
• 图层显示控制：通过opacity的条件判断，避免完成率100%时显示空的橙色条形，或完成率0%时显示空的绿色条形。
• 样式自定义：可通过修改mark中的size调整条形厚度，修改color值替换自定义配色。

内容的提问来源于stack exchange，提问作者S. vd H