Vega-Lite 中用于甘特图的滚动条 - Data Studio

Question

我正在使用 Vega-Lite for Data Studio 并且我创建了一个交互式甘特图
如下图所示：
[甘特图样本] https://i.stack.imgur.com/xZ4RA.png

但是，我有很多数据，我的图表受到固定高度和宽度的限制。像这样： [甘特图-大量数据] https://i.stack.imgur.com/2fFhQ.png

所以我的问题是，如何添加垂直滚动条？或者我有可能在 y 轴上 zoom-in/out 吗？

我已经通过使用“选择间隔”参数设置了与数据交互的可能性（拖动，zoom-in/out）。我想对“任务”做同样的事情（见下面的例子）

例如，我固定了高度以说明我的数据紧密地打包在一起的事实。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Gantt Chart.",
  "background" : "#fbfbfb",
  "height" : 80,
  "data": {
    "values": [
      {"task": "A", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "B", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "C", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
      {"task": "D", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
      {"task": "E", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
      {"task": "F", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
      {"task": "G", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "H", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "I", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "J", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "K", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "L", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "M", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "N", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "O", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "P", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
      {"task": "Q", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "R", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "S", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
      {"task": "T", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
      {"task": "U", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
      {"task": "V", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
      {"task": "W", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "X", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "Y", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "Z", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "ZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "ZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "ZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "ZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "ZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1}
    ]
  },
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "y": {
            "title":"task",
            "field": "task",
            "type": "nominal"
        },
        "x": {
            "timeUnit": "yearmonthdate",
            "field": "start",
            "type" : "temporal",

            "axis": {
            "tickCount": 12,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 4,
            "labelPadding": -24,
            "tickSize": 30,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            },
            "tickDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "x2": {
            "timeUnit": "yearmonthdate",
            "field": "end",
            "type" : "temporal",
            "axis": {
              "tickCount": 12,
              "labelAlign": "left",
              "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
              "labelOffset": 4,
              "labelPadding": -24,
              "tickSize": 30,
              "gridDash": {
                "condition": {
                  "test": {"field": "value", "timeUnit": "month", "equal": 1},
                  "value": []
                },
                "value": [2, 2]
              },
              "tickDash": {
                "condition": {
                  "test": {"field": "value", "timeUnit": "month", "equal": 1},
                  "value": []
                },
                "value": [2, 2]
              }
            }
        },
        "color": {
            "aggregate": "sum",
            "field": "metric",
            "type": "quantitative",
            "format" : ".2%",
            "title":["metric"],
            "scale":{
              "range": [
                "#e57373",
                "#ffd54f",
                "#81c784"
              ],
              "domain": [0,1]
            },
            "values" : [0,1],
            "legend": {"labelExpr": "[datum.label]*100+\"%\""},
            "condition": [
              {
                "selection": "hover",
                "value": "#17c5e8"
              }
            ]
        }
      },
      "selection": {
        "hover": {
          "type": "single",
          "empty": "none",
          "on": "mouseover",
          "clear": "mouseout"
        },
        "grid": {
          "type": "interval",
          "bind": "scales"
        }
      }
    },{
      "mark": { 
        "type": "rule", 
        "color": "red",
        "size": 1, 
        "tooltip" : true
      },
      "transform": [
        {
          "calculate": "now()",
          "as": "Today"
        }
      ],
      "encoding": {
        "x": {
          "field": "Today", 
          "type": "temporal"
        }
      }
    }
  ]
}

编辑：我尝试了以下配置，但它无法正常工作...

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Gantt Chart.",
  "background" : "#fbfbfb",
  "data": {
    "values": [
      {"task": "A", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "B", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "C", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
      {"task": "D", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
      {"task": "E", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
      {"task": "F", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
      {"task": "G", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "H", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "I", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "J", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "K", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "L", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "M", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "N", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "O", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "P", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
      {"task": "Q", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "R", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "S", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
      {"task": "T", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
      {"task": "U", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
      {"task": "V", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
      {"task": "W", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "X", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "Y", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "Z", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "ZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "ZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "ZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "ZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "ZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
      {"task": "ZG", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZH", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "ZI", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "ZJ", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "ZK", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "ZL", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "ZM", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "ZN", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "ZO", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZP", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
      {"task": "ZQ", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "ZR", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "ZS", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
      {"task": "ZT", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
      {"task": "ZU", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
      {"task": "ZV", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
      {"task": "ZW", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZX", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
      {"task": "ZY", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
      {"task": "ZZ", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
      {"task": "ZZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
      {"task": "ZZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
      {"task": "ZZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
      {"task": "ZZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
      {"task": "ZZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
      {"task": "ZZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1}
    ]
  },
  
  "hconcat": [
    {
      "width" : 50,
      "height" : 150,
      "mark": {"type": "bar", "fill": "lightgray"},
      "params": [
        {
          "name": "brush",
          "select": {
            "type": "interval",
            "encodings": ["y"]
          }
        }
      ],
      "encoding": {
        "y": {"field": "task", "type": "nominal"},
        "x": {
          "field": "start",
          "type": "temporal",
          "axis": {"tickCount": 3, "grid": false}
        },
        "x2": {
          "field": "end",
          "type": "temporal"
        }
      }
    },
    {
      "width" : 300,
      "height" : 150,
      "mark": {"type" : "bar", "tooltip" : true},
      "encoding": {
        "y": {
          "field": "task",
          "scale": {"domain": {"param": "brush"}},
          "axis": {"title": ""}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "start",
          "type" : "temporal",
          "axis": {
            "tickCount": 12,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 4,
            "labelPadding": -24,
            "tickSize": 30,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            },
            "tickDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "x2": {
          "timeUnit": "yearmonthdate",
          "field": "end",
          "type" : "temporal",
          "axis": {
            "tickCount": 12,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 4,
            "labelPadding": -24,
            "tickSize": 30,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            },
            "tickDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "color": {
          "aggregate": "sum",
          "field": "metric",
          "type": "quantitative",
          "format" : ".2%",
          "title":["metric"],
          "scale":{
            "range": [
              "#e57373",
              "#ffd54f",
              "#81c784"
            ],
            "domain": [0,1]
          },
          "values" : [0,1],
          "legend": {"labelExpr": "[datum.label]*100+\"%\""},
          "condition": [
            {
              "selection": "hover",
              "value": "#17c5e8"
            }
          ]
        }
      },
      "selection": {
        "hover": {
          "type": "single",
          "empty": "none",
          "on": "mouseover",
          "clear": "mouseout"
        },
        "grid": {
          "type": "interval",
          "bind": "scales"
          }
      }
    }
  ]
}

如下面 link 中的图片所示，有重叠条... https://i.stack.imgur.com/q75O1.png

Answer 1

您可以提供 filter 转换并使用参数过滤掉第二个图表数据，而不是将 scale 与 param 一起使用。参考下面的代码或editor:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Gantt Chart.",
  "background": "#fbfbfb",
  "data": {
    "values": [
      {
        "task": "A",
        "start": "2021-01-01",
        "end": "2021-05-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "B",
        "start": "2021-03-01",
        "end": "2021-08-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "C",
        "start": "2021-05-01",
        "end": "2021-07-01",
        "landing": "2021-04-01",
        "metric": 0.7
      },
      {
        "task": "D",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.3
      },
      {
        "task": "E",
        "start": "2021-07-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.2
      },
      {
        "task": "F",
        "start": "2021-08-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.1
      },
      {
        "task": "G",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "H",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "I",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.8
      },
      {
        "task": "J",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.9
      },
      {
        "task": "K",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "L",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.4
      },
      {
        "task": "M",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.3
      },
      {
        "task": "N",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.2
      },
      {
        "task": "O",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "P",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 1
      },
      {
        "task": "Q",
        "start": "2021-01-01",
        "end": "2021-05-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "R",
        "start": "2021-03-01",
        "end": "2021-08-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "S",
        "start": "2021-05-01",
        "end": "2021-07-01",
        "landing": "2021-04-01",
        "metric": 0.7
      },
      {
        "task": "T",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.3
      },
      {
        "task": "U",
        "start": "2021-07-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.2
      },
      {
        "task": "V",
        "start": "2021-08-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.1
      },
      {
        "task": "W",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "X",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "Y",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.8
      },
      {
        "task": "Z",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.9
      },
      {
        "task": "ZA",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "ZB",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.4
      },
      {
        "task": "ZC",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.3
      },
      {
        "task": "ZD",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.2
      },
      {
        "task": "ZE",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "ZF",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 1
      },
      {
        "task": "ZG",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "ZH",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "ZI",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.8
      },
      {
        "task": "ZJ",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.9
      },
      {
        "task": "ZK",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "ZL",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.4
      },
      {
        "task": "ZM",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.3
      },
      {
        "task": "ZN",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.2
      },
      {
        "task": "ZO",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "ZP",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 1
      },
      {
        "task": "ZQ",
        "start": "2021-01-01",
        "end": "2021-05-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "ZR",
        "start": "2021-03-01",
        "end": "2021-08-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "ZS",
        "start": "2021-05-01",
        "end": "2021-07-01",
        "landing": "2021-04-01",
        "metric": 0.7
      },
      {
        "task": "ZT",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.3
      },
      {
        "task": "ZU",
        "start": "2021-07-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.2
      },
      {
        "task": "ZV",
        "start": "2021-08-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.1
      },
      {
        "task": "ZW",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "ZX",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.5
      },
      {
        "task": "ZY",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.8
      },
      {
        "task": "ZZ",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.9
      },
      {
        "task": "ZZA",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 1
      },
      {
        "task": "ZZB",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.4
      },
      {
        "task": "ZZC",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0.3
      },
      {
        "task": "ZZD",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 0.2
      },
      {
        "task": "ZZE",
        "start": "2021-01-01",
        "end": "2021-03-01",
        "landing": "2021-04-01",
        "metric": 0
      },
      {
        "task": "ZZF",
        "start": "2021-02-01",
        "end": "2021-05-01",
        "landing": "2021-06-01",
        "metric": 1
      }
    ]
  },
  "transform": [
    {"window": [{"field": "task", "op": "row_number", "as": "taskRow"}]}
  ],
  "hconcat": [
    {
      "width": 50,
      "height": 150,
      "mark": {"type": "bar", "fill": "lightgray"},
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["y"]}}
      ],
      "encoding": {
        "y": {"field": "task", "type": "nominal"},
        "x": {
          "field": "start",
          "type": "temporal",
          "axis": {"tickCount": 3, "grid": false}
        },
        "x2": {"field": "end", "type": "temporal"}
      }
    },
    {
      "width": 300,
      "height": 150,
      "mark": {"type": "bar", "tooltip": true},
      "transform": [
        {
          "filter": "brush.task ? indexof(slice(brush.task,0,5), datum.task) > -1 : datum.taskRow < 6"
        }
      ],
      "encoding": {
        "y": {"field": "task", "axis": {"title": ""}},
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "start",
          "type": "temporal",
          "axis": {
            "tickCount": 12,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 4,
            "labelPadding": -24,
            "tickSize": 30,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            },
            "tickDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "x2": {
          "timeUnit": "yearmonthdate",
          "field": "end",
          "type": "temporal",
          "axis": {
            "tickCount": 12,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 4,
            "labelPadding": -24,
            "tickSize": 30,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            },
            "tickDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "color": {
          "aggregate": "sum",
          "field": "metric",
          "type": "quantitative",
          "format": ".2%",
          "title": ["metric"],
          "scale": {
            "range": ["#e57373", "#ffd54f", "#81c784"],
            "domain": [0, 1]
          },
          "values": [0, 1],
          "legend": {"labelExpr": "[datum.label]*100+\"%\""},
          "condition": [{"selection": "hover", "value": "#17c5e8"}]
        }
      },
      "selection": {
        "hover": {
          "type": "single",
          "empty": "none",
          "on": "mouseover",
          "clear": "mouseout"
        },
        "grid": {"type": "interval", "bind": "scales"}
      }
    }
  ]
}

如果不需要 5 个选择，则将过滤器更改为：

{
 "filter": "brush.task ? indexof(brush.task, datum.task) > -1 : datum.taskRow < 6"
}

Vega-Lite 中用于甘特图的滚动条 - Data Studio

Scrollbar in Vega-Lite for Gantt-Chart - Data Studio

google-data-studio

vega-lite

vega