Пользовательский стиль Vega для текстовой метки

Как обычно, у меня возникают проблемы с применением того, что я прочитал в документации Vega. Кажется, что не хватает нескольких частей или я не знаю, как это читать.

Проблема: у меня есть текстовая метка, соответствующая точке на точечной диаграмме. Представьте себе одну красную точку с надписью «Феррари» рядом с ней. Я хочу сделать текст больше и другого цвета.

Если я перейду к документации Vega, в раздел меток, я вижу там многообещающее свойство: style и читаю: Стиль - строка или массив строк, указывающий имя настраиваемых стилей, к которым нужно применить отметка. Стиль - это именованный набор значений свойств метки по умолчанию, определенных в конфигурации. Это звучит идеально.

Затем я создал в объекте конфигурации следующее:

config': {
      'axis': {
        'labelColor': '#b5bcc8',
        'labelFontSize': 15,
        'labelFont': '(quatro)',
        'titleColor': '#b5bcc8',
        'titleFontSize': 15,
        'titleFont': '(quatro)',
        'titlePadding': 20,
        'tickColor': '#b5bcc8',
        'domainColor': '#b5bcc8'
      },
      'custom': {
        'textFontSize': 22
      }
}

Затем примените этот собственный стиль к текстовой метке, как предлагается:

{
   'name': 'product_label',
   'type': 'text',
   'from': { 'data': 'salesData' },
   'style': 'custom',
   'encode': {
      'enter': {
         'x': { 'scale': 'x', 'field': 'month', 'offset': 8 },
         'y': { 'scale': 'y', 'field': 'salesTotal', 'offset': -5 },
            'text': { 'field': 'name' },
            'fill': { 'value': 'black' }
        }
      }
  }

Конечно, здесь я сделал много предположений, так как примеров для этого у меня нет. Я предположил, что именованная коллекция означает объект. Я предположил, что textFontSize - допустимое свойство объекта для Vega. Но и эти предположения могут быть ошибочными.


data-visualization vega
person Iulia Mihet    schedule 11.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, как обычно, было доказано, что я не умею читать документацию. Итак, конфигурация стиля находится прямо в разделе конфигурации:

https://vega.github.io/vega/docs/config/#style < / а>

По сути, я создал этот собственный стиль, следуя примеру документации:

'style': {
   'custom': {
     'fontSize': 16
    }
 }

... а затем применил его к моей текстовой метке, как в примере выше.

person Iulia Mihet    schedule 11.04.2019