Блог

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

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

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

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

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

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

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

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