Как мне отформатировать текстовые метки в процентах в vega.js? - PullRequest
Новая
       4

Как мне отформатировать текстовые метки в процентах в vega.js?

0 голосов
/ 25 июня 2019

Я только начинаю с Vega и прорабатываю несколько простых примеров. Одна из основных вещей, с которыми мне приходится сталкиваться, - это маркировка значений столбцов на гистограмме. Я могу заставить текстовую метку отображаться правильно, но не могу понять, как отформатировать значение данных в процентах ('.0%'). Я пробовал с шаблонами строк, но мне не повезло.

Вот соответствующий фрагмент из моей спецификации vega: 

    {
      "type": "text",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "category", "band": 0.5},
          "y": {"scale": "yscale", "field": "amount", "offset": -2},
          "text": {"field":"amount", "template":"{{datum.amount|number:'.0%'}}" },
          "fillOpacity": {"value":1}
        }
      }
    }

Вот ссылка на пример моей игрушки

1 Ответ

0 голосов
/ 25 июня 2019

Для других, видящих это, вот решение, к которому я пришел

Вещи, которые я должен был выяснить:

  1. Синтаксис шаблона строки устарел
  2. Добавить отформатированные значения к входным данным в виде преобразования см. Здесь синтаксис выражения
  3. Вы можете ссылаться на столбцы как источник данных и извлекать вычисленные значения x, y (используйтеудобный «Просмотр данных» редактора Vega для быстрой проверки данных)
  4. Для центрирования метки над полосой используйте атрибут «dx», установив для него половину ширины полосы шкалы: "dx": {"scale": "xscale", "band":0.5}

Также было полезно посмотреть, как vega получает значения, когда я боролся с тем, как ссылаться на значения из моих данных: https://vega.github.io/vega/docs/marks/#value-references. Опять же, использование «Просмотрщика данных» редактора Vega было очень полезным.

...