Power BI卡片图添加环形图

wujunmin

发布于 2023-09-05 15:01:49

3380

发布于 2023-09-05 15:01:49

文章被收录于专栏：wujunmin

本文是Power BI新卡片图系列第13篇=分享，前12篇如下：

《Power BI巅峰之作：新卡片图》

Power BI 2023年6月新推出的卡片图打开了图表新局面（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），环形图是常见的体现百分比的图表，通过添加SVG图标的方式，可以方便的为卡片图设置环形图。

新建一个新卡片图，放入指标，图像填充下方的SVG环形图度量值，图像位置位于右侧，图像大小稍微小一点，本例为40像素。

180度环形图 = 
VAR w =
    IF ( [M.业绩达成率] <= 0, 0, IF ( [M.业绩达成率] >= 1, 1, [M.业绩达成率] ) )
VAR ax = 55 - 50 * COS ( PI () * w )
VAR ay = 55 - 50 * SIN ( PI () * w )
VAR dx = 55 - 40 * COS ( PI () * w )
VAR dy = 55 - 40 * SIN ( PI () * w )
VAR color = IF ( [M.业绩达成率] < 1, "Tomato", "DarkCyan" )

RETURN
"data:image/svg+xml;utf8,
<svg width='110' height='55' xmlns='http://www.w3.org/2000/svg'>
    <path d='M55 55L5 55A50 50 0 0 1 105 55L95 55 A40 40 0 0 0 15 55Z' 
        fill='lightgrey'/>
    <path d='M55 55L5 55A50 50 0 0 1 " & 
        ax & " " & ay & "L" & dx & " " & dy & "
        A40 40 0 0 0 15 55Z'  
        fill='" & color & "'/>
</svg>"

环形图换成填充样式得到扇形图，除了放在右侧，也可以放在下方。

环形图扇形图视频讲解：https://t.zsxq.com/0fyBulAx5

扇形图度量值如下：

180度扇形图 = 
VAR w=IF([M.业绩达成率]<=0,0,IF([M.业绩达成率]>=1,1,[M.业绩达成率]))
VAR x=55-50*COS(PI()*w)
VAR y=55-50*SIN(PI()*w)
VAR color=IF([M.业绩达成率]<1,"Tomato", "DarkCyan")

RETURN
"data:image/svg+xml;utf8,
<svg width='110' height='55' xmlns='http://www.w3.org/2000/svg'>
    <path d='M55 55L5 55 A50 50 0 0 1 105 55Z'  fill='lightgrey'/>
    <path d='M55 55L5 55 A50 50 0 0 1 "& x &" "& y& "Z'  fill='"&color&"'/>" &
"</svg>"

全圆环形图当然也没有问题：