You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现漏斗图带状过渡条与柱状条的精准平滑衔接?

漏斗图带状过渡条衔接优化需求

我正在制作漏斗图,希望通过平滑的带状过渡条实现各柱状条间的自然过渡。但目前带状条默认连接柱状条的垂直中心,我需要将其起止点偏移半个柱状条的厚度,以实现与柱状条边角的平滑衔接。数据集存在用于切换分类的字段参数,现寻求解决方案。

当前效果截图

当前效果

当前使用的Vega-Lite配置代码

{
  "data": {"name": "dataset"},
  "transform": [
    {
      /* DYNAMIC FIELD MAPPING: Replace 'Faculty', 'Department', etc. 
         with the exact internal names of your field parameter options */
      "calculate": "isDefined(datum['Academic Level']) ? datum['Academic Level'] : isDefined(datum['Department']) ? datum['Department'] : isDefined(datum['Faculty']) ? datum['Faculty'] : isDefined(datum['Domicile']) ? datum['Domicile'] : isDefined(datum['Disability']) ? datum['Disability'] : isDefined(datum['Fee Status']) ? datum['Fee Status'] : isDefined(datum['Gender']) ? datum['Gender'] : isDefined(datum['IMD']) ? datum['IMD'] : isDefined(datum['POLAR4_quintile']) ? datum['POLAR4_quintile'] : isDefined(datum['MOA']) ? datum['MOA'] : 'Other'",
      "as": "SelectedLegend"
    },
    {
      "stack": "Sum of Value",
      "groupby": ["AttSort"],
      "as": ["x0", "x1"],
      "offset": "center",
      /* Use the new 'SelectedLegend' field for sorting and grouping */
      "sort": [{"field": "SelectedLegend", "order": "descending"}]
    },
    {
      "calculate": "(datum.x0 + datum.x1) / 2",
      "as": "label_midpoint"
    }

  ],
  "layer": [
    {
      "description": "RIBBONS",
      "mark": {"type": "area", "interpolate": "monotone", "opacity": 0.6, "orient": "horizontal"},
      "encoding": {
        "y": {"field": "AttSort", "type": "ordinal"},
        "x": {"field": "x0", "type": "quantitative"},
        "x2": {"field": "x1"},
        "detail": {"field": "SelectedLegend"},
        "color": {"field": "SelectedLegend", "type": "nominal", "sort": "descending"}
      }
    },
    {
      "description": "BARS",
      "mark": {"type": "bar", "height": {"band": 0.5}},
      "encoding": {
        "y": {"field": "AttSort", "type": "ordinal"},
        "x": {"field": "x0", "type": "quantitative"},
        "x2": {"field": "x1"},
        "color": {"field": "SelectedLegend", "type": "nominal", "sort": "descending"}
      }
    },
        {
      "description": "DATA LABELS",
      "mark": {
        "type": "text",
        "baseline": "middle",
        "fontSize": 10,
        "fontWeight": "bold",
        "color": "white"
      },
      "encoding": {
        "y": {"field": "AttSort", "type": "ordinal"},
        /* Reference the new calculated field here */
        "x": {
          "field": "label_midpoint",
          "type": "quantitative"
        },
        /* Detail is required to split labels into their colored segments */
        "detail": {"field": "SelectedLegend"},
        "text": {
          "field": "Sum of Value",
          "type": "quantitative",
          "format": ".2s"
        }
      }
    }

  ],
    "config": {
    "view": {"stroke": "transparent"},
    /* Hides background grid and cleans up the bottom axis */
    "axis": {
      "grid": false, 
      "domain": false, 
      "ticks": false, 
      "title": null,
      "labelFontSize": 10
    }
  }

}

内容的提问来源于stack exchange,提问作者Epic Triffid

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.11 12:43:17