什么是像素圖形？手機(jī)、相機(jī)拍攝的照片都屬于像素圖形，像素圖形的特點(diǎn)是每個(gè)像素都包含一個(gè)顏色，細(xì)節(jié)豐富，隨著圖形放大，會(huì)越來(lái)越模糊。常見(jiàn)的圖片格式j(luò)pg、png、gif都是基于像素。

矢量圖形基于坐標(biāo)和形狀，圖像可以無(wú)限放大且不失真。在不同的可視化場(chǎng)景，Power BI像素圖形和矢量圖形都會(huì)用到。下圖的表格中，產(chǎn)品圖片使用了像素圖形，放置在條件格式圖標(biāo)，條形圖、氣泡圖使用SVG矢量圖繪制。

Power BI內(nèi)置視覺(jué)對(duì)象表格、矩陣和新卡片圖在2023年對(duì)圖形的支持達(dá)到了全新的高度，可以將像素圖形和矢量圖形疊加產(chǎn)生豐富的可視化效果。

1.?像素圖形+基本矢量圖形
首先看一個(gè)最簡(jiǎn)單的疊加，還是上圖的產(chǎn)品銷(xiāo)售排行榜，我們可以給毛利貢獻(xiàn)為負(fù)數(shù)的產(chǎn)品照片打上紅框，此處產(chǎn)品照片是像素圖形，紅框是矢量圖形。

組合原理為：

"data:image/svg+xml;utf8,<svg>???? ?

<image xlink:href='產(chǎn)品圖片' />???? ?

<rect?width='**'?height='**' stroke='red'/>

</svg> "

這里需要注意，當(dāng)單獨(dú)作為像素圖形使用時(shí)，產(chǎn)品圖片可以直接是網(wǎng)頁(yè)URL（即存放在網(wǎng)絡(luò)圖床）。但是疊加矢量圖形使用時(shí)，目前（截止2023年8月）不支持URL，僅支持BASE64編碼，也就是說(shuō)上方代碼中的產(chǎn)品圖片需要是：

"data:image/svg+xml;utf8,<svg>??????

<image?xlink:href='BASE64編碼的產(chǎn)品圖片'?/>???? ?

<rect width='**' height='**' stroke='red'/>

</svg> "

很幸運(yùn)，BT老師開(kāi)發(fā)了適配Power BI的BASE64轉(zhuǎn)碼工具，輕松將你的圖片批量轉(zhuǎn)換，參考專(zhuān)欄前文：Power BI本地圖片顯示最佳解決方案

本文示例的產(chǎn)品照片全部是BASE64:

2.?像素圖形+矢量圖表

微信公眾號(hào)后臺(tái)有訪客排行榜，如下圖所示。左上角的排名是矢量圖表，中間的頭像為BASE64編碼像素圖形。之前需要借助第三方視覺(jué)對(duì)象Html Content實(shí)現(xiàn)這種效果。2023年6月Power BI推出新卡片圖后，可以?xún)?nèi)置圖表直接實(shí)現(xiàn)了。

3.?像素圖形+像素圖形+矢量圖形

如下圖表展示了某產(chǎn)品在不同門(mén)店的庫(kù)存情況。地圖是像素圖形充當(dāng)背景，產(chǎn)品圖片也是像素圖形，數(shù)據(jù)標(biāo)簽是矢量圖形。去年這種效果也只能第三方視覺(jué)對(duì)象，現(xiàn)在新卡片圖支持最大999像素，也可以直接展示了。

4. 像素圖形+矢量圖表+動(dòng)畫(huà)

以下是每個(gè)員工業(yè)績(jī)達(dá)成狀況，頭像是像素圖形，百分比是SVG矢量圖，新卡片圖或者表格矩陣可以直接展示。

基于本文介紹的內(nèi)容可以看出，Power BI內(nèi)置視覺(jué)對(duì)象的可視化能力已經(jīng)達(dá)到空前的高度，你能夠創(chuàng)造出什么樣的效果，就看想象力了。