近日看到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
这个度量值甚至有动画效果:
在此基础上,环形还可以进行变化,比如增大角度:
比如全环:
再比如圆圈与环形底色同时指示进度:
全家桶动画: