google-data-studio - Vega-Lite 中用于甘特图的滚动条 - Data Studio
问题描述
我正在为 Data Studio 使用 Vega-Lite,并创建了一个交互式甘特图
,如下图所示:
[甘特图示例] https://i.stack.imgur.com/xZ4RA.png
但是,我有很多数据,而且我的图表受到固定高度和宽度的限制。像这样:[gantt-chart-lots-of-data] 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
解决方案
除了使用scale
with param
,您还可以提供filter
转换并使用参数过滤出第二个图表数据。请参考以下代码或编辑器:
{
"$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"
}
推荐阅读
- java - flink taskmanager 因 OOM 失败
- ssas - 使用类似 SQLCMD 的东西连接到 MDX
- javascript - Next.JS: How to handle error in getInitialProps?
- docker - 使用来自 docker 的本地 ssh 端口转发
- asp.net - Ocelot 文档 - 身份验证
- javascript - 如何在本机脚本中导航另一个页面?
- intellij-idea - Clojure. Intellij. Delay. Concurrent. Clojure from the Ground Up
- reactjs - Fetch data using an id from an api but display an alternative text to address bar e.g. content_title in Next.js
- html - DOMPDF: List items overflow with 50% width
- java - 实现视频进度条