如何使用Vega.js基于简单数组数据绘制堆叠面积图？

以下是适配你需求的配置，直接使用包含x值、系列索引、y值、y2值的原始数组，无需复杂数据转换即可生成堆叠面积图：

var yourVlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "堆叠面积图示例",
  "width": 500,
  "height": 200,
  "padding": 5,
  "data": {
    "values": [
      {"x_val": 0, "series": "系列1", "y_val": 190250, "y2_val": 0},
      {"x_val": 2, "series": "系列1", "y_val": 187750, "y2_val": 0},
      {"x_val": 3, "series": "系列1", "y_val": 185250, "y2_val": 0},
      {"x_val": 4, "series": "系列1", "y_val": 182750, "y2_val": 0},
      {"x_val": 5, "series": "系列1", "y_val": 180250, "y2_val": 0},
      {"x_val": 0, "series": "系列2", "y_val": 200000, "y2_val": 190250},
      {"x_val": 2, "series": "系列2", "y_val": 195000, "y2_val": 187750},
      {"x_val": 3, "series": "系列2", "y_val": 190000, "y2_val": 185250},
      {"x_val": 4, "series": "系列2", "y_val": 185000, "y2_val": 182750},
      {"x_val": 5, "series": "系列2", "y_val": 180000, "y2_val": 180250}
    ]
  },
  "mark": {"type": "area"},
  "encoding": {
    "x": {
      "field": "x_val",
      "title": "年份",
      "type": "quantitative"
    },
    "y": {
      "field": "y_val",
      "title": "数值"
    },
    "y2": {
      "field": "y2_val"
    },
    "color": {
      "field": "series",
      "title": "堆叠系列",
      "type": "nominal"
    }
  }
};

vegaEmbed('#vis', yourVlSpec);

关键配置说明 #

• 数据结构：直接使用原始数组，每个元素包含四个核心字段：
  • x_val：横轴坐标值
  • series：系列索引，用于区分不同的堆叠层
  • y_val：当前堆叠层的上边界数值
  • y2_val：当前堆叠层的下边界数值
• 标记类型：使用area标记绘制面积区域
• 编码映射：
  • 横轴绑定x_val，设置为定量类型保证数值排序正确
  • 纵轴通过y和y2分别定义每个面积层的上下范围
  • color字段绑定系列索引，自动区分不同堆叠层并生成图例

内容的提问来源于stack exchange，提问作者Barry Hamilton