如何在Deneb/Power BI哑铃图上显示两组数值的绝对差值

问题说明 #

在Deneb/Power BI中制作哑铃图时，希望在每组连接线上方显示两组数值的绝对差值。尝试用Power BI度量值计算差值后，出现每个圆点都被标注数值的问题，而非在连线上仅显示单个差值。需要在Deneb内部完成差值计算与标注。

实现方法 #

通过在Deneb代码中添加数据转换逻辑和文本标注图层，实现差值的计算与精准展示：

• 新增数据转换步骤，按分类分组，计算每组两个因子的绝对差值
• 添加独立文本图层，将差值文本放置在每组连线的中间上方位置

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Dumbbell chart with difference labels",
  "data": {"name": "dataset"},
  // 新增数据转换：按分类分组计算差值
  "transform": [
    {
      "aggregate": [
        {"op": "max", "field": "Value", "as": "MaxValue"},
        {"op": "min", "field": "Value", "as": "MinValue"}
      ],
      "groupby": ["Categories"]
    },
    {
      "calculate": "abs(datum.MaxValue - datum.MinValue)",
      "as": "Difference"
    }
  ],
  "encoding": {
    "x": {
      "field": "Value",
      "type": "quantitative",
      "title": "Factor Value"
    },
    "y": {
      "field": "Categories",
      "type": "nominal",
      "title": null
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "detail": {"field": "Categories", "type": "nominal"},
        "color": {"value": "gray"}
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "color": {
          "field": "Factor",
          "type": "ordinal",
          "legend": {"title": null, "offset": 0},
          "scale": {"domain": ["One", "Two"], "range": ["#6ba5cd", "#8e946a"]},
          "title": "Legend"
        },
        "size": {"value": 300},
        "opacity": {"value": 1}
      }
    },
    // 新增差值标注图层
    {
      "mark": {
        "type": "text",
        "dy": -10, // 向上偏移10像素，避免和连线重叠
        "fontSize": 12,
        "fontWeight": "bold"
      },
      "encoding": {
        "x": {
          "calculate": "(datum.MaxValue + datum.MinValue)/2",
          "type": "quantitative"
        },
        "y": {"field": "Categories", "type": "nominal"},
        "text": {"field": "Difference", "type": "quantitative"},
        "color": {"value": "black"}
      }
    }
  ]
}

关键细节说明 #

• 数据转换：通过aggregate按分类分组，提取每组的最大值和最小值，再用calculate计算绝对差值
• 文本定位：用两个值的平均值作为x坐标，确保文本在连线中间；通过dy参数调整垂直位置，让文本显示在连线上方
• 样式控制：可调整fontSize、fontWeight、color等参数，让标注更符合可视化需求

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