Как создать частичную круговую диаграмму на Vega-lite для одной точки данных?

Я использую vega-lite для создания круговой диаграммы (на Airtable). У меня есть одна точка данных, которая является целью, установленной мной, и процент выполнения этой цели. Например, как показано ниже:

{
        "Target": "Get 10 customers",
        "Percentage complete": "60"
}

Я хотел бы сделать круговую диаграмму, которая будет заполнена на 60%, а остальная часть пуста. Подобно отображаемой интерактивной круговой диаграмме с одной дугой https://vega.github.io/vega-lite/docs/arc.html.

В настоящее время мой код выглядит так

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Customer Acquired",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "Target": "Get 10 customers",
        "Percentage complete": "60"
      }
  ]},
  "mark": {
    "type": "arc",
    "tooltip": true
  },
  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative"
    }
  }
}

Моя круговая диаграмма в настоящее время выглядит так:  введите описание изображения здесь

Я понимаю, что могу заставить круговую диаграмму выглядеть так, как я хочу, вручную установив свойство theta2 следующим образом

"mark": {
    "type": "arc",
    "tooltip": true,
    "theta2": 3.5
}

Однако я не знаю, каким будет поле «Процент выполнения», и это значение может часто меняться, поэтому я бы предпочел не делать это вручную. Возможно ли это вообще с vega-lite?


person Adnan Siddiquei    schedule 11.02.2021    source источник


Ответы (1)


Домен для тета-кодирования будет автоматически установлен на минимум и максимум ваших входных данных. Чтобы отобразить правильную часть диаграммы, вам нужно установить домен на [0, 100]:

  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative",
      "scale": {"domain": [0, 100]}
    }
  }

Вы можете просмотреть получившийся график в редактор vega:  введите описание изображения здесь

person jakevdp    schedule 11.02.2021