求助：在Power BI中用Deneb（Vega/Vega-Lite）创建带按钮的表格

一、先准备好数据 #

确保你的Power BI数据模型里有两个字段：

• 报表名称：文本类型，存储报表名称
• 报表链接：文本类型，存储报表的完整URL地址

二、直接用这个Vega-Lite配置代码 #

把下面的代码复制到Deneb的编辑器里，替换掉默认内容：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "height": {"step": 40},
  "mark": {"type": "text", "align": "left", "baseline": "middle"},
  "encoding": {
    "y": {
      "field": "报表名称",
      "type": "nominal",
      "axis": null,
      "band": 0.9
    },
    "x": {
      "type": "nominal",
      "axis": null,
      "field": "column"
    },
    "text": {"field": "value"},
    "href": {
      "condition": {"test": "datum.column === '查看'", "field": "报表链接"},
      "value": null
    },
    "color": {
      "condition": {"test": "datum.column === '查看'", "value": "#ffffff"},
      "value": "#333333"
    }
  },
  "transform": [
    {
      "fold": ["报表名称", "查看"],
      "as": ["column", "value"]
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "rect",
        "fill": "#f5f5f5",
        "opacity": 0.3
      },
      "encoding": {
        "y": {"field": "报表名称", "type": "nominal", "band": 0.9},
        "x": {"value": 0},
        "x2": {"value": "width"},
        "color": {
          "condition": {"test": "datum.y % 2 === 0", "value": "#ffffff"},
          "value": "#f9f9f9"
        }
      }
    },
    {
      "mark": {
        "type": "rect",
        "fill": "#0078d4",
        "cornerRadius": 4
      },
      "encoding": {
        "y": {"field": "报表名称", "type": "nominal", "band": 0.9},
        "x": {"value": "width - 120"},
        "x2": {"value": "width - 20"},
        "opacity": {
          "condition": {"test": "datum.column === '查看'", "value": 1},
          "value": 0
        }
      }
    }
  ],
  "config": {
    "view": {"stroke": "transparent"},
    "style": {
      "cell": {"stroke": "#dddddd", "strokeWidth": 1}
    }
  }
}

三、代码关键部分说明 #

• transform的fold操作：将两列数据转换为表格渲染需要的长格式
• 第一层rect：实现奇偶行差异化背景色，模拟行分隔线效果
• 第二层rect：生成带圆角的蓝色按钮背景，强化按钮视觉样式
• href配置：仅当点击"查看"列文字时，触发对应报表链接跳转
• height的step：控制每行高度，数值越大行高越高

四、Deneb操作步骤 #

1. 在Power BI中插入Deneb视觉对象
2. 将报表名称和报表链接拖入Deneb的「数据」面板
3. 点击Deneb的「编辑」按钮打开代码编辑器
4. 删除默认代码，粘贴上述配置代码
5. 点击「应用」，即可看到带行分隔、按钮样式的表格

五、自定义样式小技巧 #

• 修改按钮颜色：替换代码中#0078d4为目标颜色码
• 调整行高：修改height里的step值（如改为45）
• 更改按钮文字颜色：替换#ffffff为其他颜色
• 调整行分隔线：修改config中cell的stroke颜色和strokeWidth宽度

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