有没有一种实用的方法可以为Vega-Lite中的文本标记设置背景颜色或光晕?

Question

我制作了一个与此类似的甘特图 https://vega.github.io/vega-lite/examples/bar_gantt.html，但为数据标签增加了一个额外的文本层。为了适应我公司的风格指南，我只有有限数量的颜色可供选择，所有这些颜色都与黑色非常匹配，使用白色会导致一些标记在与条重叠时被隐藏。有没有办法为文本标记指定背景颜色来解决这个问题？

我尝试浏览所有Vega-Lite文档和github问题页面。我能想到的最接近的先前结果是：https://github.com/vega/vega-lite/pull/1912 哪个表明该功能已被删除？

{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 400,
"height": 150,
"data":{
"values": [
{
"rig_name": "Rig 1",
"contract_start_date": "2018-01-15 00:00:00 UTC",
"contract_end_date": "2019-03-15 00:00:00 UTC",
"dayrate": 300000
},
{
"rig_name": "Rig 1",
"contract_start_date": "2019-05-16 00:00:00 UTC",
"contract_end_date": "2019-06-15 00:00:00 UTC",
"dayrate": 30000
},
{
"rig_name": "Rig 2",
"contract_start_date": "2018-04-21 00:00:00 UTC",
"contract_end_date": "2019-04-20 00:00:00 UTC",
"dayrate": 300000
},
{
"rig_name": "Rig 2",
"contract_start_date": "2019-04-21 00:00:00 UTC",
"contract_end_date": "2019-10-20 00:00:00 UTC",
"dayrate": 300000
}
]
},
"transform": [
{
"calculate": "datum.contract_start_date + ((datum.contract_end_date - datum.contract_start_date) / 2)",
"as": "contract_mid_date"
}
],
"layer": [
{
"mark": {
"type": "bar"
},
"selection": {
"grid": {
"type": "interval", 
"bind": "scales",
"zoom": "wheel!"
}
},
"encoding": {
"y": {
"field": "rig_name",
"type": "ordinal",
"title": ""
},
"x": {
"field": "contract_start_date", 
"title": "Date",
"type": "temporal",
"timeUnit": "yearmonthdate",
"scale": {
"domain": ["2018-06-01", "2020-06-01"]
},
"axis": {
"format": "%b %Y",
"orient": "top"
}
},
"x2": {
"field": "contract_end_date"
}
}
},
{
"mark": {
"type": "text"
},
"encoding": {
"y": {
"field": "rig_name",
"type": "ordinal"
},
"x": {
"field": "contract_mid_date", 
"title": "Date",
"type": "temporal",
"timeUnit": "yearmonthdate"
},
"x2": {
"field": "contract_end_date"
},
"text": {
"field": "dayrate",
"type": "nominal"
},
"color": {
"value": "white"
}
}
}
],
"config": {
"scale": {"rangeStep":50}
}
}

Answer 1

https://github.com/vega/vega-lite/pull/1912 用于热图背景，因此它可能不适用于您的用例。 我们有一个未解决的问题 https://github.com/vega/vega/issues/1820，这将使这变得非常容易。

现在，您必须手动添加矩形图层并手动调整矩形的开始和结束位置以匹配文本长度，老实说这并不理想。