Power BI 环形图条形图组合

wujunmin

发布于 2025-04-10 03:14:38

8800

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

效果如下图所示，条形图用来展示绝对值指标，环形图展示指标和目标对比的进度。

实现方式是SVG/HTML组合。HTML Content视觉对象如下拖拽字段：

图表度量值为：

M.P.环形图条形图 = 
VAR MaxSales = MAXX(ALLSELECTED('店铺资料'[城市]), [M.销售业绩])
VAR SalesPercentage = [M.销售业绩] / MaxSales * 100
VAR AchievementRate = [M.业绩达成率] 
VAR CityName = SELECTEDVALUE('店铺资料'[城市])
VAR SalesFormatted = FORMAT([M.销售业绩], "#,#")
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