Power BI 模拟金融时报市场升降卡片图

wujunmin

发布于 2023-02-28 09:44:39

5070

发布于 2023-02-28 09:44:39

文章被收录于专栏：wujunmin

在金融时报的市场数据模块看到如下卡片图，上升和下降使用不同方向的五边形表示，数据的位置也随正负数变化而上下进行调整。

Power BI表格模拟效果如下：

原理是使用SVG矢量图生成五边形和文本，度量值如下，将度量值标记为图像URL拖入表格即可显示，度量值中的Value替换为你的指标进行复用。

模拟金融时报升降卡片 = 
VAR UP = 
    "<path d='M 0,100 V 50 L 50,0 100,50 v 50 Z' id='wujunmin' fill='DarkCyan'/>"
VAR DOWN = 
    "<path d='M 100,0 V 50 L 50,100 0,50 V 0 Z' fill='Tomato'/>"
VAR CHART ="
    data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' height='100' width='100'> "
        & IF ( [Value] >= 0, UP, DOWN ) & "
        <text x='50' y='"
            & IF ( [Value] >= 0, 70, 30 ) & "' 
            font-size='22' fill='white' 
            text-anchor='middle' dominant-baseline='middle'>"
            & FORMAT ( [Value], "0.00%" ) & "
        </text>
    </svg> "
RETURN
    CHART

更多模拟大厂图表参考：

Power BI模拟大厂图表总结贴-2022版

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

原始发表：2023-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

svg