Power BI模拟小米运动APP三环效果

wujunmin

发布于 2022-12-13 14:41:35

3860

发布于 2022-12-13 14:41:35

文章被收录于专栏：wujunmin

小米运动APP有个图表使用三个半圆展示了三个健康相关的指标，如下图所示。从外到内分别是卡路里、步数和活动分钟数实际值与目标值的对比。

这个图表的本质是六个半圆，其中三个是完整的底部背景，另外三个随着数据变化而变化。Power BI模拟效果如下图所示，可以直角半圆，也可以圆角半圆。

或者可以全圆环：

除了卡片图效果还可以在表格、矩阵中显示：

三种效果均是使用度量值嵌入SVG矢量图生成，以下给出其中一个度量值，在表格矩阵显示时将度量值标记为图像URL，在卡片图显示时将度量值放入ImageByCloudScope视觉对象。

小米_运动_SVG三环_半圆_直角 = 
//请输入每日运动目标
VAR Tar_calories = 500 //卡路里
VAR Tar_steps = 8000 //步数
VAR Tar_move_min = 30 //活动时长
//计算实际值
VAR Act_calories =
    SUM ( '日期表'[运动.卡路里] )
VAR Act_steps =
    SUM ( '日期表'[运动.步数] )
VAR Act_move_min =
    SUM ( '日期表'[运动.活动（分）] ) 
//计算达成率
VAR Ach_calories =
    DIVIDE ( Act_calories, Tar_calories )
VAR Ach_steps =
    DIVIDE ( Act_steps, Tar_steps )
VAR Ach_move_min =
    DIVIDE ( Act_move_min, Tar_move_min ) 
//图表相关参数计算
VAR r_calories = 50
VAR r_steps = 30
VAR r_move_min = 10
VAR circumference_calories =
    2 * PI () * r_calories
VAR circumference_steps =
    2 * PI () * r_steps
VAR circumference_move_min =
    2 * PI () * r_move_min
VAR stroke_calories =
    circumference_calories / 2
        * IF ( Ach_calories > 1, 1, Ach_calories )
VAR stroke_steps =
    circumference_steps / 2
        * IF ( Ach_steps > 1, 1, Ach_steps )
VAR stroke_move_min =
    circumference_move_min / 2
        * IF ( Ach_move_min > 1, 1, Ach_move_min )
VAR chart =
     "data:image/svg+xml;utf8," & 
     "<svg width='120' height='60' xmlns='http://www.w3.org/2000/svg'>
        <!--外层圈 公众号、知乎、B站：wujunmin-->
        <circle cx='60' cy='60' r='" & r_calories & "' stroke='DarkOrange' stroke-opacity='0.3' stroke-width='15' stroke-dasharray='" & circumference_calories / 2 & "' stroke-dashoffset='" & circumference_calories / 2 & "' fill='none'/>
        <circle cx='60' cy='60' r='" & r_calories & "' stroke='DarkOrange' stroke-width='15' stroke-dasharray='" & stroke_calories & "," & circumference_calories - stroke_calories & "' stroke-dashoffset='" & circumference_calories / 2 & "' fill='none'/>
        <!--中层圈 公众号、知乎、B站：wujunmin-->
        <circle cx='60' cy='60' r='" & r_steps & "' stroke='Gold' stroke-opacity='0.3' stroke-width='15' stroke-dasharray='" & circumference_steps / 2 & "' stroke-dashoffset='" & circumference_steps / 2 & "' fill='none'/>
        <circle cx='60' cy='60' r='" & r_steps & "' stroke='Gold' stroke-width='15' stroke-dasharray='" & stroke_steps & "," & circumference_steps - stroke_steps & "' stroke-dashoffset='" & circumference_steps / 2 & "' fill='none'/>
        <!--内层圈 公众号、知乎、B站：wujunmin-->
        <circle cx='60' cy='60' r='" & r_move_min & "' stroke='DeepSkyBlue' stroke-opacity='0.3' stroke-width='15' stroke-dasharray='" & circumference_move_min / 2 & "' stroke-dashoffset='" & circumference_move_min / 2 & "' fill='none'/>
        <circle cx='60' cy='60' r='" & r_move_min & "' stroke='DeepSkyBlue' stroke-width='15' stroke-dasharray='" & stroke_move_min & "," & circumference_move_min - stroke_move_min & "' stroke-dashoffset='" & circumference_move_min / 2 & "' fill='none'/>
    </svg>"
RETURN
    IF ( HASONEVALUE ( '日期表'[Date] ), CHART, BLANK () )

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-08-11，如有侵权请联系 cloudcommunity@tencent.com 删除

svg