Есть ли практический способ установить цвет фона или ореол для текстовых меток в Vega-Lite?

Я сделал диаграмму Ганта, похожую на эту 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}
  }
}

person madams    schedule 19.08.2019    source источник


Ответы (1)


https://github.com/vega/vega-lite/pull/1912 предназначен для фона тепловой карты, поэтому, вероятно, он не совсем для вашего варианта использования. У нас есть открытая проблема https://github.com/vega/vega/issues/1820, что упростит это.

На данный момент вам придется вручную добавить слой прямоугольника и вручную настроить начальное и конечное положение прямоугольника в соответствии с длиной текста, что, честно говоря, не идеально.

person kanitw    schedule 22.08.2019
comment
К сожалению, эта проблема выглядит закрытой рекомендацией использовать реактивную геометрию вместо какой-либо собственной реализации. - person Alexander Shabalin; 17.08.2020