Power BI 条形图环形图组合函数

wujunmin

发布于 2025-11-17 17:39:07

文章被收录于专栏：wujunminwujunmin

Power BI 2025年9月推出了DAX UDF（user-defined functions）用户自定义函数，定义一次计算，可在任何地方重复使用。参考文档：

https://learn.microsoft.com/zh-cn/power-bi/transform-model/desktop-user-defined-functions-overview

这种重复使用可以是DAX驱动的图表（结合SVG/HTML），我会把前期分享的很多图表样式进行函数式封装，方便用户在不了解SVG/HTML的情况下也可以自定义图表效果。

今天分享条形图和环形图的组合图函数。下图效果仅使用一个简单度量值生成：

如何在你的模型应用？

首先打开

https://junminwu.github.io/

选择SVG/HTML专题中的图表函数：

分类选择“HTML图表”，找到“HTML_Bar_Ring”，鼠标右键复制代码：

也可以直接以下复制：

DEFINE
FUNCTION HTML_Bar_Ring = 
--功能：HTML Content视觉对象条形图和环形图组合，例如同时展示业绩和达成率
--参数：维度列、条形图的指标、环形图的指标（百分比）
(ColumnForChart:anyref,MeasureForBar:numeric expr,MeasureForRing:numeric)=>
VAR MaxSales = MAXX(ALLSELECTED(ColumnForChart), MeasureForBar)
VAR SalesPercentage = MeasureForBar / MaxSales * 100
VAR AchievementRate = MeasureForRing // 假设这是0-1之间的值
VAR CityName = SELECTEDVALUE(ColumnForChart)
VAR SalesFormatted = FORMAT(MeasureForBar, "#,#")
VAR DonutChart = 
"<svg width='50' height='50' viewBox='0 0 42 42'>
    <circle cx='21' cy='21' r='15' fill='none' stroke='lightgrey' stroke-width='4'/>
    <circle cx='21' cy='21' r='15' fill='none' stroke='#2196F3' stroke-width='4' 
            stroke-linecap='round' stroke-dasharray='" & AchievementRate * 100 & ",100' transform='rotate(-90 21 21)'/>
    <text x='21' y='26' font-family='Arial' font-size='10'  text-anchor='middle' fill='#333'>" & 
        FORMAT(AchievementRate, "0%") & "</text>
</svg>"
--公众号wujunmin
VAR BarChart = 
"<div style='display: flex; align-items: center; width: 100%; gap: 10px;'>
    <div style='flex-shrink: 0;'>" & DonutChart & "</div>
    <div style='flex-grow: 1; position: relative;'>
        <div style='height: 30px; background: #f0f0f0; border-radius: 15px; overflow: hidden;'>
            <div style='height: 100%; width: " & SalesPercentage & "%; background: linear-gradient(90deg, #2196F3, #64B5F6); 
                        border-radius: 15px 0 0 15px; display: flex; align-items: center; padding-left: 15px; 
                        color: white; font-family: Arial; font-weight: bold; font-size: 15px;'>
                " & CityName & " " & SalesFormatted & "
            </div>
        </div>
    </div>
</div>"
RETURN BarChart

确保Power BI Desktop是2025年9月及以后的版本，如果不是，安装包地址：

https://www.microsoft.com/zh-cn/download/details.aspx?id=58494

打开文件-选项和设置-选项-预览功能，勾选“DAX用户自定义函数”：