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

【问题标题】：Scrollbar in Vega-Lite for Gantt-Chart - Data StudioVega-Lite 中用于甘特图的滚动条 - Data Studio
【发布时间】：2025-12-01 04:05:02
【问题描述】：

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

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

所以我的问题是，如何添加垂直滚动条？或者我可以在 y 轴上放大/缩小吗？

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

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

{
  "$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"
          }
      }
    }
  ]
}

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

【问题讨论】：

  • 询问了类似的question，并提供了添加滚动条的方法。请检查是否有帮助。
  • 我正在尝试做一些类似的事情（如果可能的话）：observablehq.com/@d3/zoomable-bar-chart
  • 但我会尝试检查您上面的链接，谢谢！ :)
  • @wahabmemon 我尝试了一些东西，但是当我在左侧选择时，右侧图表无法正确过滤。确实，总是有重叠的条...我已经编辑了帖子

标签： google-data-studio vega-lite vega


【解决方案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"
}

【讨论】：

  • 它有效！多谢 ！我可以问最后一个问题吗？我想在默认情况下动态选择。例如，前 5 个“任务”已经被选中，但没有硬编码配置中的值。
  • 我已经更新了我的答案，最初或未执行选择时，只会显示 5 个条形图。添加了row_number，它将显示少于 6 条的记录。但是，我认为没有办法在该灰色图表上显示默认间隔选择。
  • 很好，这就是我想做的！ ：） 非常感谢你的帮助 ！我也不知道是否可以显示默认间隔选择，但它与您的解决方案一起工作
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式