Power BI 模擬大廠圖表的核心思路
《業(yè)務(wù)人員無編程基礎(chǔ),如何在Power BI自定義圖表樣式?》這篇文章我推薦業(yè)務(wù)人員以SVG矢量圖的方式低代碼自定義圖表。其中提到,沒有好的圖表思路時(shí),可以直接借鑒大廠的。
借鑒的核心思路可以用一個(gè)成語描述-庖丁解牛,把看到的優(yōu)秀圖表案例拆解成基礎(chǔ)元素(文本、形狀、顏色、大小、位置等)然后利用DAX強(qiáng)大的計(jì)算力組裝到一起。下面以麥肯錫這個(gè)啞鈴圖進(jìn)行說明。

pbix示例文件下載:https://t.zsxq.com/09uKEjpqM
前面講過,二維空間(屏幕、紙張)的圖表都是矩形,拿到一個(gè)圖表首先觀察它的寬度(width)和高度(height),麥肯錫這個(gè)啞鈴圖可以看到高度是隨著店鋪數(shù)量的多少浮動(dòng)的,寬度是固定的。針對(duì)單個(gè)店鋪,寬度遠(yuǎn)大于高度。此處我們把寬度定為120像素,單個(gè)店鋪占位高度定為20像素。
這里像素比例是大致揣摩,后期不合適可以調(diào)整。具體的像素值沒有意義,你也可以定為1200*200,這是因?yàn)镾VG的矢量特性,可以無限放大縮小。整體寬度高度越大,后期設(shè)定具體元素的大小時(shí)等比放大即可。
接著觀察空間布局,本例大致分為三塊,左邊是類別標(biāo)簽(店鋪名稱),中間是兩年對(duì)比的啞鈴,右側(cè)是差異數(shù)值,灰色的底紋直線也不能忽略,下圖列示了不同空間的所有內(nèi)容。


第三步,確定每個(gè)部分需要什么技術(shù)手段(SVG基礎(chǔ)元素)實(shí)現(xiàn)。本例左側(cè)的類別標(biāo)簽是文本,啞鈴的兩頭是圓圈中間連接的是直線,差異值是文本,灰色背景分割線也是直線。所以,各個(gè)部分總共使用了三種SVG基礎(chǔ)圖形,text、line和circle,具體如下:

第四步,確定每個(gè)基礎(chǔ)元素的屬性(位置、大小、顏色),以類別標(biāo)簽(店鋪名稱)為例,文本進(jìn)行了左對(duì)齊,SVG坐標(biāo)系左上角是(0,0),類別標(biāo)簽的起始橫軸位置x則是0,因隨后要在20個(gè)像素的高度空間預(yù)留啞鈴的位置,因此,類別標(biāo)簽縱坐標(biāo)y稍微偏上一些。顏色統(tǒng)一為黑色,文本大小設(shè)定一個(gè)固定值,這里需與第一步設(shè)置的圖表總寬度高度匹配,具體數(shù)值可以自行測(cè)試,直到滿意為止。

這樣,XY位置、顏色、文本大小三個(gè)屬性把類別標(biāo)簽就確定好了。

啞鈴、差異數(shù)值、背景線的拆解也是同理,以下是拆解結(jié)果:

所有元素的設(shè)置都是像素級(jí)精確,設(shè)置完成后,CONCATENATEX進(jìn)行串聯(lián),得到需要的圖表結(jié)果。原理懂了,在此基礎(chǔ)上就可以進(jìn)一步加工,比方差異值和率同時(shí)顯示,并且加上文本顏色變化。

以上過程重復(fù)十來八遍,將會(huì)得心應(yīng)手,見到好圖就手癢,忍不住到Power BI試試。借用Jack Ma的名言,讓天下沒有難做的圖表。