Power BI 模拟Apple Watch 环形图

wujunmin

发布于 2022-12-13 15:01:17

5910

发布于 2022-12-13 15:01:17

文章被收录于专栏：wujunmin

近日看到Apple watch的一个宣传图，下方有三个漂亮的环形图：

左侧的环形图使用Power BI内置图表即可实现。中部的三个环形嵌套前期在讲小米的图表时涉及过（Power BI模拟小米运动APP三环效果），这里不再重复。右侧的环形图值得拿出来单独说明下，下方是Power BI实现效果。

这个图表有三个细节，首先环形的两端为圆角；其次环形有一定的透明效果；再次，进度指示为一个圆圈，且圆圈与环形有一定间距。Power BI使用十行左右的度量值即可实现，把度量值放入HTML Content即可正常显示：

苹果半环形图 = 
VAR Pct=0.66//替换为实际模型中的百分比 0-1
VAR Chart=
    "<svg viewbox='0 0 110 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

这个度量值甚至有动画效果：