如何在Vega-Lite中实现子字段嵌套的堆叠柱状图

现有配置与问题 #

你当前的Vega-Lite配置生成的是平级堆叠的柱状图，代码如下：

{  
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",  
  "title": "Table 1",  
  "width": "container",  
  "height": "container",  
  "data": {    
    "values": [     
      {        
        "DAT" : "2023-01-18",        
        "CONNEXION" : 2307,        
        "ECHEC_CONNEXION" : 1699,        
        "CONNEXION_UNIQUE" : 531,        
        "ECHEC_CONNEXION_UNIQUE" : 198,        
        "ECHEC_CONNEXION_UNIQUE_PS" : 71,        
        "ECHEC_CONNEXION_UNIQUE_UNC" : 127,        
        "SIGNALER" : 212,        
        "DEBUT_DOSSIER" : 990,        
        "SOUMISSION_DOSSIER" : 431,        
        "DEVERSEMENT_SCOLARIX" : 42,        
        "MISE_EN_PAIEMENT" : 21,        
        "DOSSIER_FINALISE" : 6    
      },    
      {        
        "DAT" : "2023-01-19",        
        "CONNEXION" : 1239,        
        "ECHEC_CONNEXION" : 808,        
        "CONNEXION_UNIQUE" : 296,        
        "ECHEC_CONNEXION_UNIQUE" : 120,        
        "ECHEC_CONNEXION_UNIQUE_PS" : 50,        
        "ECHEC_CONNEXION_UNIQUE_UNC" : 70,        
        "SIGNALER" : 104,        
        "DEBUT_DOSSIER" : 351,        
        "SOUMISSION_DOSSIER" : 233,        
        "DEVERSEMENT_SCOLARIX" : 91,        
        "MISE_EN_PAIEMENT" : 55,        
        "DOSSIER_FINALISE" : 26    
      },    
      {        
        "DAT" : "2023-01-20",        
        "CONNEXION" : 840,        
        "ECHEC_CONNEXION" : 650,        
        "CONNEXION_UNIQUE" : 169,        
        "ECHEC_CONNEXION_UNIQUE" : 82,        
        "ECHEC_CONNEXION_UNIQUE_PS" : 20,        
        "ECHEC_CONNEXION_UNIQUE_UNC" : 62,        
        "SIGNALER" : 58,        
        "DEBUT_DOSSIER" : 170,        
        "SOUMISSION_DOSSIER" : 132,        
        "DEVERSEMENT_SCOLARIX" : 106,        
        "MISE_EN_PAIEMENT" : 25,        
        "DOSSIER_FINALISE" : 9    
      }   
    ]  
  }, 
  "transform": [    
    {      
      "fold": [        
        "SIGNALER",        
        "CONNEXION_UNIQUE",        
        "ECHEC_CONNEXION_UNIQUE"      
      ],      
      "as": [        
        "key",        
        "value"      
      ]    
    }  
  ],  
  "mark": "bar",  
  "encoding": {    
    "x": {      
      "field": "DAT",      
      "type": "nominal"        
    },    
    "y": {      
      "field": "value",      
      "type": "quantitative"    
    },    
    "color": {      
      "type": "nominal",      
      "field": "key"    
    }  
  }
}

当前效果：

你的需求是将SIGNALER和ECHEC_CONNEXION_UNIQUE嵌套在CONNEXION_UNIQUE柱形内部，而非平级堆叠，期望效果：

修改后的配置方案 #

通过**分层（layer）**设计结合数据转换，可实现嵌套堆叠效果，完整代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Table 1",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "DAT": "2023-01-18",
        "CONNEXION": 2307,
        "ECHEC_CONNEXION": 1699,
        "CONNEXION_UNIQUE": 531,
        "ECHEC_CONNEXION_UNIQUE": 198,
        "ECHEC_CONNEXION_UNIQUE_PS": 71,
        "ECHEC_CONNEXION_UNIQUE_UNC": 127,
        "SIGNALER": 212,
        "DEBUT_DOSSIER": 990,
        "SOUMISSION_DOSSIER": 431,
        "DEVERSEMENT_SCOLARIX": 42,
        "MISE_EN_PAIEMENT": 21,
        "DOSSIER_FINALISE": 6
      },
      {
        "DAT": "2023-01-19",
        "CONNEXION": 1239,
        "ECHEC_CONNEXION": 808,
        "CONNEXION_UNIQUE": 296,
        "ECHEC_CONNEXION_UNIQUE": 120,
        "ECHEC_CONNEXION_UNIQUE_PS": 50,
        "ECHEC_CONNEXION_UNIQUE_UNC": 70,
        "SIGNALER": 104,
        "DEBUT_DOSSIER": 351,
        "SOUMISSION_DOSSIER": 233,
        "DEVERSEMENT_SCOLARIX": 91,
        "MISE_EN_PAIEMENT": 55,
        "DOSSIER_FINALISE": 26
      },
      {
        "DAT": "2023-01-20",
        "CONNEXION": 840,
        "ECHEC_CONNEXION": 650,
        "CONNEXION_UNIQUE": 169,
        "ECHEC_CONNEXION_UNIQUE": 82,
        "ECHEC_CONNEXION_UNIQUE_PS": 20,
        "ECHEC_CONNEXION_UNIQUE_UNC": 62,
        "SIGNALER": 58,
        "DEBUT_DOSSIER": 170,
        "SOUMISSION_DOSSIER": 132,
        "DEVERSEMENT_SCOLARIX": 106,
        "MISE_EN_PAIEMENT": 25,
        "DOSSIER_FINALISE": 9
      }
    ]
  },
  "transform": [
    {
      "calculate": "datum.CONNEXION_UNIQUE - datum.SIGNALER - datum.ECHEC_CONNEXION_UNIQUE",
      "as": "CONNEXION_UNIQUE_REST"
    }
  ],
  "layer": [
    // 外层：总独立连接数柱形（背景）
    {
      "mark": {"type": "bar", "color": "#e0e0e0"},
      "encoding": {
        "x": {"field": "DAT", "type": "nominal"},
        "y": {"field": "CONNEXION_UNIQUE", "type": "quantitative"},
        "tooltip": [
          {"field": "DAT", "type": "nominal"},
          {"field": "CONNEXION_UNIQUE", "type": "quantitative", "title": "总独立连接数"}
        ]
      }
    },
    // 内层：子字段堆叠柱形
    {
      "transform": [
        {
          "fold": ["SIGNALER", "ECHEC_CONNEXION_UNIQUE"],
          "as": ["key", "value"]
        }
      ],
      "mark": {"type": "bar", "width": 20},
      "encoding": {
        "x": {"field": "DAT", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative", "stack": true},
        "color": {"field": "key", "type": "nominal"},
        "tooltip": [
          {"field": "DAT", "type": "nominal"},
          {"field": "key", "type": "nominal"},
          {"field": "value", "type": "quantitative"}
        ]
      }
    },
    // 可选：总连接数减去子字段的剩余部分
    {
      "mark": {"type": "bar", "width": 20, "color": "#bdbdbd"},
      "encoding": {
        "x": {"field": "DAT", "type": "nominal"},
        "y": {"field": "CONNEXION_UNIQUE_REST", "type": "quantitative"},
        "tooltip": [
          {"field": "DAT", "type": "nominal"},
          {"field": "CONNEXION_UNIQUE_REST", "type": "quantitative", "title": "剩余独立连接数"}
        ]
      }
    }
  ],
  "resolve": {
    "scale": {"y": "shared"}
  }
}

关键修改说明 #

1. 数据转换：新增CONNEXION_UNIQUE_REST字段，计算总独立连接数与两个子字段的差值，用于补全外层柱形的剩余区域。
2. 分层设计：
   • 第一层绘制最外层的总独立连接数柱形，作为嵌套的背景容器。
   • 第二层对两个子字段进行折叠转换并堆叠，通过设置较小的width实现嵌套视觉效果。
   • 第三层为可选部分，绘制剩余数值的柱形，补全外层的空白区域。
3. 轴共享：通过resolve.scale.y: shared确保所有层的y轴刻度一致，保证嵌套柱形对齐。

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