VegaLite 中堆叠条形的排序顺序

Question

我在 vegalite 中创建了一个聚合总和堆积条形图，我想要内部小条形（小块）按堆栈升序排列

例如在此图表中 -> 编辑器链接我已按降序对总和进行排序，并且默认情况下其中每个值的顺序按字母顺序升序（aaa 然后 ccc 然后 ggg 然后 lll），但我也希望在其中值的升序基础（即通过数据中存在的 VALUE 列，我们通过该列找到总和）

Answer 1

你是说这样吗？您需要订单编码。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "bharat": "N5113A",
        "color": "#71A4DD",
        "india": "mmm",
        "value": 14,
        "idd": 3
      },
      {
        "bharat": "N5153A",
        "color": "#71A4DD",
        "india": "mmm",
        "value": 13,
        "idd": 7
      },
      {
        "bharat": "N5153A",
        "color": "#65D4EF",
        "india": "ppp",
        "value": 11,
        "idd": 11
      },
      {
        "bharat": "N5113A",
        "color": "#65D4EF",
        "india": "ppp",
        "value": 10,
        "idd": 13
      },
      {
        "bharat": "N5153A",
        "color": "#B2AA9C",
        "india": "nnn",
        "value": 10,
        "idd": 14
      },
      {
        "bharat": "N5113A",
        "color": "#96F1E2",
        "india": "rrr",
        "value": 9,
        "idd": 17
      },
      {
        "bharat": "N5153A",
        "color": "#736BA7",
        "india": "ttt",
        "value": 9,
        "idd": 19
      },
      {
        "bharat": "N5153A",
        "color": "#C1AAF7",
        "india": "aaa",
        "value": 8,
        "idd": 21
      },
      {
        "bharat": "N5113A",
        "color": "#B2AA9C",
        "india": "nnn",
        "value": 8,
        "idd": 22
      },
      {
        "bharat": "N5113A",
        "color": "#736BA7",
        "india": "ttt",
        "value": 8,
        "idd": 24
      },
      {
        "bharat": "N5113A",
        "color": "#C1AAF7",
        "india": "aaa",
        "value": 8,
        "idd": 25
      },
      {
        "bharat": "N5153A",
        "color": "#A3E3F8",
        "india": "www",
        "value": 7,
        "idd": 28
      },
      {
        "bharat": "N5153A",
        "color": "#9FEFF2",
        "india": "ggg",
        "value": 4,
        "idd": 42
      },
      {
        "bharat": "N5113A",
        "color": "#66E27B",
        "india": "ccc",
        "value": 3,
        "idd": 53
      },
      {
        "bharat": "N5113A",
        "color": "#EAD3D8",
        "india": "nnn",
        "value": 2,
        "idd": 63
      },
      {
        "bharat": "N5153A",
        "color": "#7667DD",
        "india": "lll",
        "value": 2,
        "idd": 65
      },
      {
        "bharat": "N5153A",
        "color": "#66E27B",
        "india": "ccc",
        "value": 2,
        "idd": 70
      },
      {
        "bharat": "N5113A",
        "color": "#DAC3D2",
        "india": "llll",
        "value": 2,
        "idd": 79
      },
      {
        "bharat": "N5113A",
        "color": "#A3E3F8",
        "india": "www",
        "value": 2,
        "idd": 80
      },
      {
        "bharat": "N5113A",
        "color": "#9FEFF2",
        "india": "ggg",
        "value": 2,
        "idd": 83
      }
    ]
  },
  "width": 700,
  "height": 350,
  "mark": {"type": "bar", "stroke": "black"},
  "encoding": {
    "tooltip": [{"field": "bharat"}, {"field": "india"}, {"field": "value"}],
    "x": {"aggregate": "sum", "field": "value"},
    "order": {"sort": "descending", "field": "value"},
    "y": {"field": "bharat", "type": "nominal"},
    "color": {"field": "india", "scale": {"range": {"field": "color"}}}
  }
}