Power BI - SVG 条形图

bg：带时间维度切换，多层级条形图

1. 写一个指标，多指标就可以不用重复写时间维度

KPI = 
VAR a =SELECTEDVALUE ( 'KPI'[指标名称] ) //新建指标表
VAR resurt =
    SWITCH (
                a,
                "K1", [K1], // K1 指标名，[K1] 该指标计算sum或count等
                "k2", [K2]    
            )
RETURN
    resurt

2.时间维度

KPI MTD = CALCULATE ( [KPI], DATESMTD( 'Date'[Date]) )
//QTD YTD 同上

3.KPI 时间维度筛选

KPI.时间维度 = SWITCH(SELECTEDVALUE('时间维度'[时间维度]), //新建维度表
                                                 "YTD",[KPI YTD],
                                                 "MTD",[KPI MTD],
                                                 "QTD",[KPI QTD]
                                                 )

4. 条形图SVG

4.1 单一条形图

• 4.1.1 单一维度

条形图.单一层级 = 
var a =[KPI.时间维度]
var e =CALCULATE([KPI.时间维度],ALL(fact[Channel])) //前面的维度 

var svg="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='30'>
    <rect x='0' y='1' width=' "&   DIVIDE(a,e)*150 &" ' height='25' 
        fill= '#18B196' 
    /> 
    <text x=' 
"& IF(a>100000000||DIVIDE(a,e)*150>=150,DIVIDE(a,e)+50,DIVIDE(a,e)*150+20) &" 
'
 y='17'
 font-size='12' 
 text-anchor='start'  <!-- 还有middle或end  --> 
 font-family='Arial' 
 fill='white'>"
& FORMAT(a,"#,0") &
"</text> 
</svg>"
return IF(ISBLANK(a),BLANK(),svg)

条形图.单一维度

• 4.1.2 多层级

条形图.多层级 = 
var a =[KPI.时间维度]
var e =
MAXX(ALLSELECTED('fact'[层级1],'fact'[层级2],'fact'[层级3]), MAX([KPI.时间类型], [KPI]))

var svg="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='30'>
    <rect x='0' y='1' width='"&   DIVIDE(a,e)*150 &"' height='25' 
        fill= '#42C8E5'
    /> 
    <text x='"& IF(a>100000000||DIVIDE(a,e)*150>=150,DIVIDE(a,e)+50,DIVIDE(a,e)*150+20) &"' y='17' font-size='12' text-anchor='start' font-family='Arial' fill='white'>"& FORMAT(a,"#,0") &"</text> 
</svg>"
return IF(ISBLANK(a),BLANK(),svg)

条形图.多层级

4.2 组合条形图

多层级.组合.条形图 = 
VAR MaxWidth = 300
VAR MaxValue =MAXX(ALLSELECTED('fact'[层级1],'fact'[层级2],'fact'[层级3]), MAX([KPI.时间类型], [KPI]))
VAR ScaleFactor = 0.08  // 调整比例以缩小图形

VAR Width1 = IF(MaxValue = 0, 0, MaxWidth * [KPI.时间维度]/ MaxValue * ScaleFactor)
VAR Width2 = IF(MaxValue = 0, 0, MaxWidth * [KPI2] / MaxValue * ScaleFactor/2)

VAR SVG =
    IF(ISBLANK([KPI.时间维度]), 
       BLANK(), 
        "data:image/svg+xml;utf8, 
        <svg xmlns='http://www.w3.org/2000/svg' width='" & MaxWidth & "' height='25'>                                   
             <!-- 第一个条形图 -->
            <rect x='0' y='0' width='" & Width1 & "' height='25' fill='rgb(224,157,0)'/>
            <!-- 第二个条形图 -->
            <rect x='" & Width1 & "' y='0' width='" & Width2 & "' height='25' fill='rgb(157,172,204)'/>
            <!-- 第一个条形图的文本 -->
          <text x='" & (Width1/60) & "' y='20' font-size='12' font-weight='bold' fill='white'>" & [KPI.时间维度] & " / <tspan dx='1' font-size='12' font-family='Arial' fill='white'>" & [KPI2]& "</tspan></text>

            <!-- 第二个条形图的文本 -->
                                                                                
        </svg>"
    )
RETURN
    SVG

多层级.组合.条形图