如何在 Vegalite 中创建分组条形图？

Question

Name | Value 1 | Value 2
BTC  | 1       | 2
ETH  | 1       | 2

对此：

试图以此为例：https://vega.github.io/vega-lite/examples/bar_grouped.html，但我做不到。

有人能给我指出正确的方向吗？提前谢谢你。

Answer 1

您可以不使用问题中提供的列，而是简单地使用图层并将 x 轴保持为通用，并分别在每个图层的 y 轴中提供 value1 和 value2，并简单地提供一些偏移量以将其显示为分组条图表。下面是基本规格配置和 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "title": "My chart",
  "width": 200,
  "data": {
    "values": [
      {"name": "BTH", "value1": 28, "value2": 24, "legendTitle": "value1"},
      {"name": "ETH", "value1": 55, "value2": 25, "legendTitle": "value2"}
    ]
  },
  "encoding": {
    "x": {"field": "name", "type": "nominal", "axis": {"labelAngle": 0}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "xOffset": -20, "size": 30, "color": "skyblue"},
      "encoding": {
        "y": {
          "field": "value1",
          "type": "quantitative",
          "axis": {"title": null, "ticks": false}
        }
      }
    },
    {
      "mark": {"type": "bar", "size": 30, "xOffset": 18, "color": "orange"},
      "encoding": {
        "y": {
          "field": "value2",
          "type": "quantitative",
          "axis": {"title": null, "ticks": false}
        }
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "fill": {
          "field": "legendTitle",
          "scale": {"range": ["skyBlue", "orange"]},
          "legend": {"title": null, "symbolType": "square", "orient": "bottom"}
        }
      }
    }
  ]
}

如何在 Vegalite 中创建分组条形图？

How to create Grouped Bar Chart in Vegalite?

charts

vega-lite