Deneb卡片开发求助：添加总营收文本与月度营收条形图

问题 #

需制作Deneb卡片：顶部显示总营收度量值文本，下方展示按月份拆分营收的条形图。已完成条形图，但添加Text Mark关联总营收时，文本以数据点形式嵌入图表，不符合布局需求。

解决方案 #

核心是用Vega-Lite的**垂直拼接（vconcat）**将文本组件与条形图组件分离，各自独立处理数据：

1. 顶部文本组件：单独使用text标记，通过聚合转换获取总营收的单一值，固定显示位置
2. 下方条形图组件：保留原有实现，专注月度营收展示

调整后的Vega-Lite代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "vconcat": [
    // 顶部总营收文本模块
    {
      "mark": {"type": "text", "fontSize": 28, "fontWeight": "bold", "align": "center"},
      "encoding": {
        "text": {
          "field": "总营收", 
          "type": "quantitative", 
          "format": "$,.0f" // 根据需求调整数值格式
        },
        "y": {"value": 10} // 固定垂直位置，确保文本居中显示
      },
      "transform": [
        {"aggregate": [{"op": "sum", "field": "营收", "as": "总营收"}]}
      ]
    },
    // 下方月度营收条形图模块
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "月份", "type": "ordinal"},
        "y": {"field": "营收", "type": "quantitative"}
      }
    }
  ],
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"grid": false} // 可选：优化图表样式
  }
}

关键要点 #

• vconcat实现上下布局，让文本和条形图成为独立的可视化单元，避免数据点冲突
• 文本模块通过aggregate转换直接计算总营收，确保只生成一个数据点，避免重复显示
• 给文本标记设置align: center和固定y值，保证文本在卡片顶部居中

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