为什么此条形图的总字段未编码到此 vega lite 规格上的正确 x 轴位置？

Question

我试图沿着该图表（vega-lite 编辑器）显示条形图总计数，但标签似乎没有放置在 x 轴上的正确位置。他们都在1的位置。

这是我用于文本标记的编码：

{
  "mark": {
    "type": "text",
    "fill": "#000",
    "align": "left",
    "dx": 8,
    "text": {
      "expr": "format(datum.chartPageElementAxisYGroupTotal, '.0f')"
    }
  },
  "encoding": {
    "x": {
      "field": "chartPageElementAxisYGroupTotal"
    }
  }
}

有什么问题吗？有没有更好的方法用 vega-lite 来做到这一点？

Answer 1

试试这个。

您对粉丝艺术的独特计数看起来不正确，但我不明白您的数据或您想要展示的内容。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "values",
    "values": [
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 10,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 0,
        "chartPageElementGroupBy": "Todo",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "selgGm64Ff1e8J37j"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 35,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 75,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 40,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 50,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 60,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 50,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 60,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 75,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 70,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 90,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 80,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 95,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Another one",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Another one",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Another one",
        "chartPageElementAxisY": 30,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Another one",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      }
    ]
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "x": {
          "field": "chartPageElementAxisY",
          "type": "quantitative",
          "aggregate": "distinct",
          "axis": {"title": "", "domain": false}
        },
        "y": {
          "field": "chartPageElementAxisX",
          "type": "nominal",
          "axis": {"title": "", "grid": false, "ticks": false},
          "sort": "ascending"
        },
        "tooltip": [
          {"field": "chartPageElementAxisX", "title": "Project"},
          {
            "field": "chartPageElementAxisYGroupTotal",
            "type": "quantitative",
            "title": "Total"
          },
          {
            "field": "chartPageElementGroupBy",
            "title": "Status",
            "type": "nominal"
          },
          {
            "field": "chartPageElementAxisY",
            "type": "quantitative",
            "aggregate": "distinct",
            "title": "Distinct: Progress",
            "format": {"isAggregationData": false, "numberFormat": " .0f"},
            "formatType": "number"
          }
        ],
        "color": {
          "field": "chartPageElementGroupBy",
          "title": "Status",
          "type": "nominal"
        },
        "order": {"field": "groupByOrder"}
      }
    },
    {
      "mark": {
        "type": "text",
        "fill": "#000",
        "align": "left",
        "dx": 8,
        "text": {"expr": "format(datum.chartPageElementAxisYGroupTotal, '.0f')"}
      },
      "transform": [
        {
          "aggregate": [
            {
              "op": "distinct",
              "field": "chartPageElementAxisY",
              "as": "chartPageElementAxisYGroupTotal"
            }
          ],
          "groupby": ["chartPageElementAxisX"]
        }
      ],
      "encoding": {
        "x": {
          "field": "chartPageElementAxisYGroupTotal",
          "type": "quantitative"
        },
        "y": {
          "field": "chartPageElementAxisX",
          "type": "nominal",
          "axis": {"title": "", "grid": false, "ticks": false},
          "sort": "ascending"
        }
      }
    }
  ],
  "transform": [
    {
      "calculate": "if(datum.chartPageElementGroupBy === \"In progress\", 3,if(datum.chartPageElementGroupBy === \"Done\", 2,if(datum.chartPageElementGroupBy === \"Todo\", 1, 0)))",
      "as": "groupByOrder"
    }
  ],
  "height": 300,
  "width": 553
}