什么是計(jì)算器風(fēng)格的數(shù)字？下圖一看便知。

Power BI 2023年新推出的卡片圖可以借助SVG矢量圖實(shí)現(xiàn)計(jì)算器字體效果，本文講解實(shí)現(xiàn)原理。

1. 尋找數(shù)字圖標(biāo)
首先，需要找到0-9對應(yīng)的SVG代碼，這里推薦三個。一是阿里巴巴的，訪問網(wǎng)址：https://www.iconfont.cn/
在上述網(wǎng)址搜索“數(shù)字 LED”，你可以找到若干風(fēng)格，然后下載文件或者復(fù)制SVG源碼。

另外github也有人分享了一組，即上方視頻演示的風(fēng)格，文件找到digital0-9即是。

如果覺得以上風(fēng)格太過樸素，可以考慮https://www.freepik.com/提供的AI文件，搜索“LED Number”，可以得到很多風(fēng)格。

下載的文件為AI格式，用在線轉(zhuǎn)換工具h(yuǎn)ttps://convertio.co/zh/轉(zhuǎn)換為SVG格式。轉(zhuǎn)換完成后所有數(shù)字堆在一起，需要使用SVG在線編輯網(wǎng)站或者inkscape這樣的專業(yè)軟件進(jìn)行編輯裁剪，保存為0-9總共10個文件。

請注意以上資源是否能夠商用是不確定的，具體請查看網(wǎng)站的說明或者直接聯(lián)系設(shè)計(jì)者。

2.?Power BI展示
將SVG數(shù)字直接用DAX生成一個表或者以文件夾導(dǎo)入文本的方式批量導(dǎo)入Power BI，如下圖所示。

這些SVG文件如何和具體的指標(biāo)對應(yīng)？首先，需要把數(shù)據(jù)進(jìn)行拆分。比如235（這個數(shù)字可以替換為任意指標(biāo)度量值）拆分為縱向2、3、5，以下是拆分環(huán)節(jié)的演示，第一列是索引，第二列是拆分結(jié)果。

這兩列數(shù)字各有用處，拆分結(jié)果Value2用來和0-9的SVG計(jì)算器字體對應(yīng)，索引Value用來確定這個數(shù)字放在第幾位。235中，3的索引是2，所以3對應(yīng)的SVG代碼需要向右移動，移動多少？假如每個數(shù)字的寬度是140個像素，3的橫向坐標(biāo)就是(2-1)*140，即140，5的橫向坐標(biāo)就是(3-1)*140。

SUBSTITUTE ( SVGCode, "<svg", "<svg x='" & ( [Value] - 1 ) * 140 & "' y='0' " )

最后使用CONCATENATEX將調(diào)整完坐標(biāo)的每個SVG數(shù)字拼接起來，度量值即完成。將任意指標(biāo)放入新卡片圖，隱藏標(biāo)簽，打開圖像，圖像URL選擇上方制作的度量值，并按需調(diào)整圖像大小，計(jì)算器風(fēng)格的卡片搞定。

本例沒有考慮小數(shù)點(diǎn)、千分位分隔符等數(shù)字形態(tài)，加入這些元素的操作原理也是相同的，只是略微增加復(fù)雜度。