Power BI Deneb 利用fillOpacity实现切片器Tier条形高亮效果

问题场景 #

我已实现基础堆叠条形图，现有代码如下，需要实现交互效果：用户通过切片器选择某一Tier层级时，归属该Tier的条形自动高亮（示例选中项为Tier 1，支持选择任意Tier）。推测可通过fillOpacity属性实现，求具体配置方式。

现有代码 #

{
  "data": {
    "values": [
      {"name": "A", "group": "High", "tier": "Tier 3"},
      {"name": "B", "group": "Med", "tier": "Tier 1"},
      {"name": "C", "group": "High", "tier": "Tier 1"},
      {"name": "D", "group": "High", "tier": "Tier 2"},
      {"name": "E", "group": "Low", "tier": "Tier 3"},
      {"name": "F", "group": "Low", "tier": "Tier 1"}
    ]
  },
  "transform": [
    {
      "aggregate": [
        {
          "field": "name",
          "op": "count",
          "as": "numProj"
        }
      ],
      "groupby": [
        "name",
        "group"
      ]
    },
    {
      "stack": "numProj",
      "groupby": ["group"],
      "sort": [
        {
          "field": "name",
          "order": "descending"
        }
      ],
      "as": "barTop"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "numProj",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": -10
      },
      "encoding": {
        "y": {
          "field": "barTop",
          "type": "quantitative"
        },
        "text": {
          "field": "name"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
      "title": null,
        "labelAngle": 0
      }
    }
  }
}

具体配置步骤 #

你的思路完全正确，核心通过fillOpacity条件编码+选择参数实现，只需要改3处：

• 补全聚合维度：把tier加到transform下第一个aggregate操作的groupby数组里，否则聚合后会丢失tier字段，无法做匹配判断
• 新增选择参数：在配置最外层加params字段，定义绑定Tier字段的单选下拉选择器（即你说的切片器）
• 加透明度条件判断：在bar图层的encoding里新增fillOpacity配置，匹配选中Tier的条形透明度设为1（完全不透明高亮），未匹配的设为0.2（半透明弱化）

修改后完整可运行代码 #

{
  "data": {
    "values": [
      {"name": "A", "group": "High", "tier": "Tier 3"},
      {"name": "B", "group": "Med", "tier": "Tier 1"},
      {"name": "C", "group": "High", "tier": "Tier 1"},
      {"name": "D", "group": "High", "tier": "Tier 2"},
      {"name": "E", "group": "Low", "tier": "Tier 3"},
      {"name": "F", "group": "Low", "tier": "Tier 1"}
    ]
  },
  "params": [
    {
      "name": "selectedTier",
      "bind": {
        "input": "select",
        "options": [null, "Tier 1", "Tier 2", "Tier 3"],
        "labels": ["全部", "Tier 1", "Tier 2", "Tier 3"],
        "name": "选择Tier层级："
      }
    }
  ],
  "transform": [
    {
      "aggregate": [
        {
          "field": "name",
          "op": "count",
          "as": "numProj"
        }
      ],
      "groupby": [
        "name",
        "group",
        "tier"
      ]
    },
    {
      "stack": "numProj",
      "groupby": ["group"],
      "sort": [
        {
          "field": "name",
          "order": "descending"
        }
      ],
      "as": "barTop"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "numProj",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        },
        "fillOpacity": {
          "condition": {
            "test": "!selectedTier || datum.tier == selectedTier",
            "value": 1
          },
          "value": 0.2
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": -10
      },
      "encoding": {
        "y": {
          "field": "barTop",
          "type": "quantitative"
        },
        "text": {
          "field": "name"
        },
        "opacity": {
          "condition": {
            "test": "!selectedTier || datum.tier == selectedTier",
            "value": 1
          },
          "value": 0.2
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
      "title": null,
        "labelAngle": 0
      }
    }
  }
}

额外给文本标签也加了同步的透明度配置，避免标签和条形透明度不一致显得突兀，下拉选项里加了「全部」选项，选中时所有条形都保持完全显示。

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