編輯導(dǎo)語：一張圖表的產(chǎn)生背后有其結(jié)構(gòu)和邏輯，本篇文章作者介紹了圖表的產(chǎn)生過程，講述了一個(gè)圖表的基本結(jié)構(gòu)、數(shù)據(jù)的相關(guān)內(nèi)容以及可視化過程中的步驟等，感興趣的一起來學(xué)習(xí)一下，希望對(duì)你有幫助。

我在之前的文章提到過，今年3月份我轉(zhuǎn)行到低代碼產(chǎn)品領(lǐng)域，轉(zhuǎn)行后負(fù)責(zé)的第一個(gè)模塊就是圖表。

幾乎所有的圖表產(chǎn)品都會(huì)包括兩大塊：數(shù)據(jù)源和可視化，而我負(fù)責(zé)的是數(shù)據(jù)可視化的部分。

在我之前的認(rèn)識(shí)里，數(shù)據(jù)可視化其實(shí)就是各種圖表，了解清楚每個(gè)圖表的應(yīng)用場(chǎng)景就夠了。比如你應(yīng)該知道柱狀圖、折線圖和環(huán)圖之間的區(qū)別，這就夠了。

但負(fù)責(zé)了低代碼產(chǎn)品的圖表模塊之后，我需要讓用戶可以通過拖拽的方式自己搭建出不同類型的圖表，這要求產(chǎn)品經(jīng)理從原理上了解一個(gè)圖表是如何產(chǎn)生的。

這種從底層邏輯到業(yè)務(wù)應(yīng)用的推演非常有意思，當(dāng)然對(duì)于我入門低代碼的圖表模塊也非常重要。

想要寫出來，也是想跟大家分享如何從底層去認(rèn)識(shí)一個(gè)我們之前可能以為自己比較了解的產(chǎn)品。

01

一個(gè)圖表的結(jié)構(gòu)通常如下圖所示：包括數(shù)據(jù)源和數(shù)據(jù)可視化兩部分。

數(shù)據(jù)源其實(shí)就是通過各種方式得到一張基礎(chǔ)表，這個(gè)基礎(chǔ)表代表了我們記錄業(yè)務(wù)的所有明細(xì)數(shù)據(jù)。典型的基礎(chǔ)表格式是 1+N，第一行是記錄信息所需要的所有字段，第 2-N 行代表的是每一個(gè)實(shí)體的具體信息。

舉個(gè)例子，我可以用下面這張表記錄一個(gè)學(xué)校高一年級(jí)所有學(xué)生的基本信息。

從第二行開始，我就要錄入每一個(gè)學(xué)生的信息，假設(shè)現(xiàn)在有 5 名學(xué)生，則這個(gè)基礎(chǔ)表的信息可以展示為，而這個(gè)對(duì)于可視化系統(tǒng)來說，就是一個(gè)標(biāo)準(zhǔn)的數(shù)據(jù)源。

順便說一句，雖然本文不聊數(shù)據(jù)源，但數(shù)據(jù)結(jié)構(gòu)的確定是可視化的重要前提，非常非常重要。當(dāng)我們要去建立一個(gè)業(yè)務(wù)的數(shù)據(jù)模型時(shí)，我們一定要想清楚到底有哪些字段是需要添加的，每個(gè)字段的類型是什么。

字段可以多，但一定不能缺，如果我們一開始沒有星座這個(gè)字段，忽然有一天你突發(fā)奇想，覺得我們可以看看學(xué)校里不同星座的學(xué)生的占比，那意味著底層的數(shù)據(jù)模型就要變動(dòng)，這時(shí)候所有用到這個(gè)模型的圖表，可能都會(huì)受到影響。

回到正題，「可視化」就是要通過更直觀的方式呈現(xiàn)我們想要看到的結(jié)論。

它滿足兩點(diǎn)要求：首先必須要直觀，為了這一點(diǎn)，我們應(yīng)該發(fā)明了很多不同的圖表類型，后面會(huì)講到；其次，它必須要支撐我們想看的結(jié)論，不帶任何目標(biāo)的可視化，都是無用功。

我將可視化部分總結(jié)為三個(gè)具有前后順序的動(dòng)作：數(shù)據(jù)分組、數(shù)據(jù)計(jì)算和可視化。這也是本文的重點(diǎn)，我將詳細(xì)說明。

02

數(shù)據(jù)分組是確定從什么視角看什么數(shù)據(jù)，這與我們想要分析的結(jié)論息息相關(guān)。事實(shí)上，當(dāng)我們準(zhǔn)確描述我們想要看的結(jié)論時(shí)，我們就已經(jīng)在無形中確定了我們的數(shù)據(jù)分組。

比如，我們想要看不同班級(jí)學(xué)生的中考分?jǐn)?shù)，這時(shí)候「不同班級(jí)」就是我們的切分視角，「班級(jí)」這個(gè)字段，就成了我們的維度。

確定分組之后，我們就可以按照班級(jí)這個(gè)字段的不同值，將基礎(chǔ)表分為如下幾張表：

在上述結(jié)論中，隱含的另一個(gè)重要概念是指標(biāo)，我們切分不同的班級(jí)之后，想看的不是年齡，也不是星座，而是中考分?jǐn)?shù)。指標(biāo)，就是我們想要看的數(shù)據(jù)。

確定了維度和指標(biāo)，真正的數(shù)據(jù)分組才算完整，他們應(yīng)該是下面這三組表。

03

數(shù)據(jù)計(jì)算，就是給指標(biāo)附上一個(gè)具有統(tǒng)計(jì)意義的值。這個(gè)值是從指標(biāo)字段的明細(xì)數(shù)據(jù)中計(jì)算得來的，也可以說是聚合得來的，所以我們一般叫做聚合函數(shù)。

例如對(duì)于 2 班的兩個(gè)學(xué)生來說，中考分?jǐn)?shù)分別為 560 和 572，如果我想看大家的平均分，那就是對(duì)這兩個(gè)明細(xì)數(shù)據(jù)求平均，如果我想看每個(gè)班學(xué)生的最高分呢，用的就是求最大值函數(shù)。

相同的明細(xì)數(shù)據(jù)經(jīng)過不同的聚合函數(shù)作用后，會(huì)得到不同的結(jié)果，因而聚合函數(shù)直接反映了我們想要統(tǒng)計(jì)的目標(biāo)。

如果我們想要評(píng)估的是不同班級(jí)學(xué)生的底子水平如何呢？那可能平均分是一個(gè)不錯(cuò)的聚合函數(shù)。但如果某些班級(jí)有中考加分的學(xué)生，而這里的分?jǐn)?shù)是正常文化課的分?jǐn)?shù)，那我們看平均分可能就不客觀了，這之后中位數(shù)應(yīng)該是一個(gè)更好的選擇。

無論如何，隨著我們想要分析的結(jié)論和明細(xì)數(shù)據(jù)的質(zhì)量不同，我們選擇不同的聚合函數(shù)，這個(gè)過程，就是數(shù)據(jù)計(jì)算。

經(jīng)過數(shù)據(jù)計(jì)算之后，維度和指標(biāo)就都有了統(tǒng)計(jì)含義，以平均分為例。

事實(shí)上，實(shí)際情況可能比這個(gè)復(fù)雜得多。實(shí)際場(chǎng)景中的維度可能不止一個(gè)，想要看的指標(biāo)也不止一個(gè)，或者指標(biāo)不是數(shù)字，這時(shí)候該怎么辦呢？

04

聊聊維度嵌套和多指標(biāo)。

什么時(shí)候我們會(huì)有維度嵌套呢，就是某一個(gè)單獨(dú)的字段無法滿足我們切分?jǐn)?shù)據(jù)的需求。我們對(duì)上述的例子擴(kuò)充一些樣本來解釋這個(gè)問題。

如果我想看不同班級(jí)中不同年齡學(xué)生的中考分?jǐn)?shù)，那「不同班級(jí)中不同年齡」這個(gè)分組標(biāo)準(zhǔn)可以用一個(gè)字段分出來么？顯然是不行的。

此時(shí)我們分組的角度會(huì)變成先看「班級(jí)」，再看「年齡」，這就是維度嵌套的情況，它是由兩個(gè)字段合起來決定一個(gè)分組的。這時(shí)候的分組就會(huì)變成

• 1 班-15 歲-平均分；
• 1 班-16 歲-平均分；
• 1 班-17 歲-平均分；
• 2 班 -16 歲-平均分；
• 2 班-17 歲 -平均分；
• 3 班-16 歲 -平均分。

很明顯，維度嵌套時(shí)，分組就變多了。理論上，維度可以一直嵌套下去，比如我在上述每一個(gè)分組的基礎(chǔ)上，再按照星座去進(jìn)一步細(xì)分組別。

當(dāng)然，這只是邏輯上的可行性，是否需要這么分，完全要看「要得到目標(biāo)結(jié)論是否需要這么分」，還是那句話，可視化建立在業(yè)務(wù)分析目標(biāo)上的。

除了維度嵌套，還有多指標(biāo)的情況。如果我想要看的是不同班級(jí)學(xué)生的年齡數(shù)據(jù)和中考分?jǐn)?shù)數(shù)據(jù)，這時(shí)候「年齡」就不再是維度，而變成了指標(biāo)。

多指標(biāo)不存在嵌套的情況，每個(gè)指標(biāo)都是獨(dú)立計(jì)算的，所以相較于多維度來說，多指標(biāo)的情況應(yīng)該更簡單一些。

05

在我小學(xué)的時(shí)候，其實(shí)就已經(jīng)接觸過圖表了，那時(shí)候所有的指標(biāo)都默認(rèn)是數(shù)字，所以他們可以做很多聚合運(yùn)算。

但是當(dāng)我做低代碼產(chǎn)品的時(shí)候，我發(fā)現(xiàn)任何具有統(tǒng)計(jì)意義的字段都可以作為指標(biāo)。具有統(tǒng)計(jì)意義和數(shù)字類型不一定是相等的：金額、年齡、分?jǐn)?shù)，這些數(shù)字類型的字段當(dāng)然具有統(tǒng)計(jì)意義，但是你想過沒有，文本類型的字段有沒有統(tǒng)計(jì)意義呢？

還是上面那個(gè)表，如果 2 班的文藝委員，想了解自己班上一共有多少個(gè)不同星座的學(xué)生，能不能統(tǒng)計(jì)呢？

可以。那不同的星座該怎么統(tǒng)計(jì)呢？這就要用到去重計(jì)數(shù)這個(gè)聚合函數(shù)。

所以，非數(shù)字類型字段作為指標(biāo)時(shí)，如果具有統(tǒng)計(jì)意義，往往會(huì)用到計(jì)數(shù)和去重計(jì)數(shù)這兩個(gè)聚合函數(shù)。

你只需要記住，非數(shù)字類型的字段也是可以作為指標(biāo)的。但并不是所有的都可以，如果某個(gè)字段存儲(chǔ)的是一張照片，那確實(shí)就沒啥統(tǒng)計(jì)的必要了。

有人問？難道我不能統(tǒng)計(jì)一堆照片的平均像素大小么？可以的，但這時(shí)候，照片和照片像素應(yīng)該是兩個(gè)字段，你要統(tǒng)計(jì)的，其實(shí)是照片像素這個(gè)字段，本質(zhì)上還是一個(gè)數(shù)字類型的字段。

06

講到這里總結(jié)一下，基礎(chǔ)表在可視化中需要完成兩個(gè)基本的步驟，分組和計(jì)算。分組主要看維度和指標(biāo)，計(jì)算主要看聚合函數(shù)。當(dāng)然維度可以有多個(gè)，指標(biāo)可以有多個(gè)。

接下來便是可視化的核心步驟，從數(shù)據(jù)到圖表的映射，更簡單一些，就是將表格承載的數(shù)據(jù)，變成可視化的圖表。

目前市面上主流 bi 產(chǎn)品支持的圖表類型非常多，常見的包括：透視表、指標(biāo)卡、柱狀圖、條形圖、折線圖、面積圖、組合圖、餅圖、散點(diǎn)圖、雷達(dá)圖、漏斗圖、熱力圖、地圖、?；鶊D等等。

我們以常見的柱狀圖為例來說明數(shù)據(jù)到圖表的映射。

面對(duì)任何一種圖表，我們首先要想的是，維度和指標(biāo)分別放在哪里，限制如何。

以柱狀圖為例，它的 x 軸一般作為維度，y 軸一般作為指標(biāo)，且只有一個(gè) x 軸和一個(gè) y 軸，常見的用法如下：

這張圖我們看到的就是不同學(xué)校有多少人獲獎(jiǎng)。

除此之外，還有第三個(gè)能夠承載信息的元素是顏色，顏色也可以承載信息，它既可以是維度，也可以是指標(biāo)，就看怎么用，如下圖：

這種情況下，我的 y 軸就是三個(gè)指標(biāo)字段共用了，用顏色這個(gè)元素來區(qū)分，但本質(zhì)上，他們是被獨(dú)立觀察的三個(gè)指標(biāo)。

我也可以用顏色承載維度，做維度的嵌套，看一個(gè)指標(biāo)。

這時(shí)候，我們看的就是不同學(xué)校中不同狀態(tài)的學(xué)生的獲獎(jiǎng)記錄數(shù)據(jù)。

需要注意的是，一張圖表中，顏色只能承載維度或者指標(biāo)，不能同時(shí)兼任。

07

完成了數(shù)據(jù)到圖表的映射之后，一張基本的圖表就渲染出來了。當(dāng)然我們還可以給它配置更多的信息，比如標(biāo)題，比如每個(gè)柱子上的數(shù)據(jù)標(biāo)簽，甚至用堆積柱狀圖看不同狀態(tài)學(xué)生的百分比。

但是萬變不離其宗，再豐富的展示樣式背后，其實(shí)都是從數(shù)據(jù)源→數(shù)據(jù)分組→數(shù)據(jù)計(jì)算→可視化這一套系統(tǒng)流程，我們?cè)谀X子里思考后手動(dòng)繪制也好，我們通過無代碼的方式搭建出來也好，底層邏輯基本都是這一條鏈路。

掌握了底層邏輯，才能在處理不同場(chǎng)景下的應(yīng)用問題時(shí)做到有條不紊。

08

說點(diǎn)題外話，當(dāng)我剛剛接手圖表這個(gè)功能模塊的時(shí)候，有很多業(yè)務(wù)方提了各種需求過來，也有之前積壓的很多遺留需求。那時(shí)候我覺得，真的好難。

面對(duì)每一個(gè)單點(diǎn)的問題，雖然我能夠通過自己做產(chǎn)品的基本素養(yǎng)去理解問題并提出解決方案，但解決這個(gè)問題和解決下個(gè)問題之間，我并沒找到本質(zhì)上的聯(lián)系。

用經(jīng)濟(jì)學(xué)的話來說，我解決問題的邊際成本是沒有變的。

但是當(dāng)我逐漸理解了一張圖表背后的底層邏輯之后，很多問題在我看來都是一個(gè)問題，我開始梳理清楚了不同需求之間的關(guān)系和脈絡(luò)。在這個(gè)時(shí)候我才逐漸覺得，這項(xiàng)新工作我應(yīng)該是入門了。

我把這一切分享出來，也是希望大家，尤其是各位產(chǎn)品經(jīng)理，在自己負(fù)責(zé)的領(lǐng)域內(nèi)，努力找到你所能挖掘到的最深層次的通用邏輯。

#專欄作家#

大力哥呀，微信公眾號(hào)：大力哥，人人都是產(chǎn)品經(jīng)理專欄作家。一個(gè)90后產(chǎn)品經(jīng)理，已經(jīng)寫了6年的公眾號(hào)，通過輸出獲得了許多意料外的成長。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。