Power BI 内置图表实现Apple Watch环形图效果

wujunmin

发布于 2023-09-05 17:20:55

9590

文章被收录于专栏：wujunminwujunmin

去年此时看到Apple Wacth宣传图的一个环形图效果（下图右下角），并在Power BI使用第三方视觉对象实现。今年Power BI对SVG的支持大幅度提升，内置表格和新卡片图（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图）都可以加载该图表。

图表度量值需要在原来基础上进行一定修改，以半圆环形图为例，度量值如下：

苹果半环形图 = 
VAR Pct=0.66//替换为实际模型中的百分比 0-1
VAR Chart="data:image/svg+xml;utf8,
    <svg width='110' height='60' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='55' cy='55' r='50' fill='none' stroke='LightGrey' stroke-opacity='0.4' stroke-width='10' stroke-linecap='round' stroke-dasharray='" & PI()*50 & "' stroke-dashoffset='" & PI()*50 & "'/>
         <g id='wujunmin'>
            <circle cx='55' cy='5' r='5' fill='White' fill-opacity='0.8' stroke='#228FF1'  stroke-width='2.5'/>
            <animateTransform attributeName='transform' type='rotate' from='-90 55 55' to='"&180*pct-90 &" 55 55' begin='0s' dur='3s' fill='freeze'/>
        </g>
        <text x='55' y='45' text-anchor='middle' dominant-baseline='middle' font-size='25' fill='white'>"&ROUND(Pct*100,0)&"</text>
    </svg>"
RETURN
    Chart

将度量值标记为图像URL直接放入表格或者放入新卡片图的图像，隐藏新卡片图的标签和标注：