时间戳

首页 > 解决方案 > 如何对在 vega-lite 中创建的饼图的“图例”进行排序？

vega-lite - 如何对在 vega-lite 中创建的饼图的“图例”进行排序？

问题描述

我正在尝试按（与切片的排序方式相同）对饼图的图例进行doc_count排序，但我找不到如何做到这一点的方法。

图例中项目的所需顺序是：

c
f
e
b
a
d

（按 doc_count 排序）

有人能帮助我吗？谢谢

在线 vega 编辑器

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count"} // <- this does not work
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {"field": "label", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "radius": 150, "fontSize": 13},
      "encoding": {
        "text": {"field": "percents", "type": "nominal"},
        "color": {"value": "white"}
      }
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}

标签： vega-litevega

解决方案

您的更改几乎是正确的，您只是错过了添加颜色排序顺序。还要在其他层重复排序，这将为您解决排序问题。以下是片段和编辑器：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {
          "field": "label",
          "type": "nominal",
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {"type": "text", "color": "white", "radius": 150, "fontSize": 13},
      "encoding": {"text": {"field": "percents", "type": "nominal"}}
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}

推荐阅读