Блог

Я пытаюсь создать круговую диаграмму, в которой дуги упорядочены по размеру (по часовой стрелке), но не могу понять, как это сделать.

Кажется, что аргумент «сортировать» в «theta» указывает на порядок «color» по умолчанию, например:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "theta": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}
 

вот результат: дуги упорядочены по обратному названию категории

Я могу отсортировать легенду («цвет») по «значению», но независимо от того, что я указываю для «сортировки» «тета», дуги не будут отсортированы по размеру «значения».

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
  "color": {"field": "category", "type": "nominal", "sort": {"field" :"value", "order": "ascending"}},
  "theta": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}
 

это результат: легенда упорядочена, дуги по-прежнему имеют тот же порядок

Похоже, вам нужна order кодировка. Например (открыть в редакторе):

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "order": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}