在tableau官網(wǎng)看到一種圖標在邊框之外的卡片圖，如下圖所示，Power BI可否實現(xiàn)同樣的效果？

來源：https://public.tableau.com/app/profile/mazeenmuhammed/viz/FitBit_16532927278840/FitnessStatistics

Power BI今年推出的新卡片圖視覺對象可以添加圖標，但圖標只能放在卡片內(nèi)部，無法突破邊框。

打開卡片圖的圖像位置設置，可以看到圖標位置只能在卡片圖內(nèi)部的上下左右四個方向，沒有tableau示例的那種斜向上45度角，更沒有置于邊框上一說。

但是，我還是把這種效果實現(xiàn)了：

最簡單的方法是疊圖，即卡片圖和圖標是兩個視覺對象載體，把圖標的視覺對象放在卡片圖左上方即可。有5個卡片圖就放5個卡片對應的圖標。

這種方式的優(yōu)點是不需要學習成本，缺點是視覺對象加載需要加倍。另外，排版如果發(fā)生變化，可能還需要挨個重新調(diào)整。最后還有個根本問題，卡片數(shù)量不固定，每個卡片要求圖標/圖像不一樣怎么辦？例如下方的卡片顯示每個人物的業(yè)績狀況，且分別帶有頭像。

遇事不決SVG。把整個卡片用SVG重構(gòu)可以解決以上所有問題。如果是固定圖標，卡片度量值是如下邏輯（具體的SVG標簽rect、text語法網(wǎng)上資料很多，大家可以自行檢索，此處只講邏輯）：

圖標的代碼哪里獲得？B站我的視頻搜索“查詢系統(tǒng)”我分享了6000多種圖標樣式供你使用。圖標如何正好在左上角？這需要進行空間營造。如果你的圖標大小是24*24，整個畫布空間就需要長寬都比24大，比如寬度100，高度50。圖標之外的空間用來存放指標的數(shù)值。

度量值中的rect用于繪制一個矩形，即上方示例的灰色底紋。rect的邊長略小于畫布空間，使得左上角的圖標和線條有交叉。

text正常居中存放。把完成后的度量值放入新卡片圖的圖像URL，并關(guān)閉新卡片圖的標簽標注。下圖可以看到新卡片圖實際占地面積會大于視覺顯示面積，就是因為上方進行了留白，為了讓圖標溢出。

如果需要動態(tài)切換圖標（如人物頭像），原理一致，只是需要將圖標代碼替換為base64圖片,頭像的高度寬度值需要遠小于畫布。

因動態(tài)圖標卡片數(shù)量的不確定性，因此不宜采用新卡片圖展示，矩陣比較合適：

上方均為左側(cè)溢出展示，中間上方溢出、右側(cè)溢出是相同的道理，調(diào)整溢出對象的橫坐標即可。