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，这将使这变得非常容易。

就目前而言，您将不得不手动添加一个rect层，并手动调整rect的开始和结束位置以匹配文本长度，这确实是不理想的。

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

1 个答案: