沒有好的圖表思路時(shí)，可以直接借鑒大廠的。借鑒的核心思路可以用一個(gè)成語(yǔ)描述-庖丁解牛，把看到的優(yōu)秀圖表案例拆解成基礎(chǔ)元素（文本、形狀、顏色、大小、位置等）然后利用DAX強(qiáng)大的計(jì)算力組裝到一起。下面以麥肯錫這個(gè)啞鈴圖進(jìn)行說(shuō)明（圖表度量值參考《Power BI模擬麥肯錫啞鈴圖表現(xiàn)差異》）。

前面講過(guò)，二維空間（屏幕、紙張）的圖表都是矩形，拿到一個(gè)圖表首先觀察它的寬度（width）和高度（height），麥肯錫這個(gè)啞鈴圖可以看到高度是隨著店鋪數(shù)量的多少浮動(dòng)的，寬度是固定的。針對(duì)單個(gè)店鋪，寬度遠(yuǎn)大于高度。此處我們把寬度定為120像素，單個(gè)店鋪占位高度定為20像素。

這里像素比例是大致揣摩，后期不合適可以調(diào)整。具體的像素值沒有意義，你也可以定為1200*200，這是因?yàn)镾VG的矢量特性，可以無(wú)限放大縮小。整體寬度高度越大，后期設(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í)顯示，并且加上文本顏色變化。

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