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

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

0 голосов
/ 11 апреля 2019

Так что, как обычно, у меня возникают проблемы с применением того, что я прочитал в документации 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.Но эти предположения также могут быть ошибочными.

1 Ответ

0 голосов
/ 11 апреля 2019

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

https://vega.github.io/vega/docs/config/#style

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

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

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

...