Power BI 实时展示今日时间进度

wujunmin

发布于 2022-12-13 15:04:58

8830

发布于 2022-12-13 15:04:58

文章被收录于专栏：wujunmin

一天有24个小时，每小时60分钟，每分钟60秒。今天到现在已经过去了百分之多少？环形图是比较好的展示时间进度的载体，在Power BI可以一个度量值设计出这样实时倒计时的图表，时间与电脑时间同步，绿色圆球每秒都在向终点移动，移动一圈正好24小时，周而复始。

读者可以左下角阅读原文，或者访问以下网址，在线查看效果：

https://app.powerbi.com/view?r=eyJrIjoiMzhkYTkwZDctZGZkNy00YzUxLWE1MzYtNzMyMTdlYzMxYzJmIiwidCI6IjI5Y2JkNTY4LTBlOWItNDQ0Zi1iZTA1LTYxNjMyOTAzNjJmZSJ9&pageName=ReportSectionebd4121138b05c3c5947

把以下度量值放入HTML Content视觉对象，倒计时工具即完成。该方法本质上是利用了SVG矢量图的动画功能。

SVG一天进度-本地 = 
VAR C_Hours=HOUR(NOW())
VAR C_Minutes=MINUTE(NOW())
VAR C_Seconds=SECOND(NOW())
VAR Total_Seconds= C_Hours*3600+C_Minutes*60+C_Seconds
RETURN
"<svg viewbox='0 0 110 110' xmlns='http://www.w3.org/2000/svg'>
<circle cx='55' cy='55' r='50' fill='none' stroke='LightGrey' stroke-width='3'/>
<line x1='55' y1='3.5' x2='55' y2='6.5' stroke='Tomato' stroke-width='0.5'/>
<circle cx='55' cy='55' r='5' fill='LightGrey'/>
<g id='wujunmin'>
<line x1='55' y1='55' x2='55' y2='5' stroke='LightGrey' stroke-width='0.5'/>
<circle cx='55' cy='5' r='3' fill='DarkCyan'/>
<animateTransform attributeName='transform' type='rotate' from='"&360*Total_Seconds/86400&" 55 55' to='"&360+360*Total_Seconds/86400&" 55 55' begin='0s' dur='"&86400&"s' repeatCount='indefinite'/>
</g>
<text x='55' y='56' text-anchor='middle' dominant-baseline='middle' font-size='6'>W</text>
</svg>"

在此基础上，可以做一些细节优化，比如模拟Apple Watch的效果：