Vega-Lite带状图实现方案分享及优化建议征集

我想分享一种用Vega-Lite设计带状图的方法。我了解到Power BI原生图表是少数可生成此类图表的工具之一，因此好奇Vega-Lite是否也能实现类似效果。如果能将区域图从当前条形的右侧（而非中心位置）连接到下一个条形的左侧，呈现效果会更佳，期待各位的想法和建议。

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "A chart combining stacked bars with lines, sorted by value", "width": {"step": 100}, "data": {"values": [{"category": "A", "value": 30, "type": "Type 1"}, {"category": "A", "value": 20, "type": "Type 2"}, {"category": "A", "value": 30, "type": "Type 3"}, {"category": "B", "value": 15, "type": "Type 1"}, {"category": "B", "value": 25, "type": "Type 2"}, {"category": "B", "value": 35, "type": "Type 3"}, {"category": "C", "value": 35, "type": "Type 1"}, {"category": "C", "value": 22, "type": "Type 2"}, {"category": "C", "value": 32, "type": "Type 3"}]}, "encoding": {"x": {"field": "category", "type": "nominal", "axis": {"domain": true, "grid": false, "ticks": false, "labels": true, "labelAngle": 0, "labelFontSize": 12, "labelPadding": 6}, "title": null}, "y": {"field": "value", "type": "quantitative", "axis": {"domain": false, "grid": false, "ticks": false, "labels": false}, "title": null}, "opacity": {"value": 1}, "color": {"title": null, "field": "type", "type": "nominal", "scale": {"range": ["#008080", "#e6c14f", "#6b8e23"]}, "legend": {"padding": 0, "labelFontSize": 11, "labelColor": "#706D6C", "rowPadding": 8, "symbolOpacity": 0.6, "symbolType": "square"}}, "order": {"field": "value", "type": "quantitative", "sort": "descending"}, "tooltip": [{"field": "category", "type": "nominal", "title": "Category"}, {"field": "type", "type": "nominal", "title": "Type"}, {"field": "value", "type": "quantitative", "title": "Value"}]}, "layer": [{"transform": [{"window": [{"op": "sum", "field": "value", "as": "sum"}], "groupby": ["category", "type"]}], "mark": {"type": "area", "interpolate": "monotone"}, "encoding": {"opacity": {"value": 0.4}, "y": {"field": "sum", "type": "quantitative", "stack": "zero"}, "x": {"field": "category", "type": "nominal"}, "detail": {"field": "type", "type": "nominal"}, "order": {"aggregate": "max", "field": "value", "type": "quantitative", "sort": "descending"}}}, {"mark": {"type": "bar", "interpolate": "monotone", "width": {"band": 0.4}}, "encoding": {"y": {"field": "value", "type": "quantitative", "stack": "zero"}, "opacity": {"value": 1}}}, {"transform": [{"aggregate": [{"op": "sum", "field": "value", "as": "total"}], "groupby": ["category"]}], "mark": {"type": "text", "dy": -10, "fontSize": 12}, "encoding": {"x": {"field": "category", "type": "nominal"}, "y": {"field": "total", "type": "quantitative"}, "text": {"field": "total", "type": "quantitative"}, "color": {"value": "black"}}}, {"mark": {"type": "text", "dy": 12, "fontSize": 9}, "encoding": {"x": {"field": "category", "type": "nominal"}, "y": {"field": "value", "type": "quantitative", "stack": "zero"}, "text": {"field": "value", "type": "quantitative"}, "color": {"value": "#FFF"}}}], "config": {"view": {"stroke": null}}}

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