本文由 網易雲 發布。
作者：張淞（本篇文章僅限知乎內部分享，如需轉載，請取得作者同意授權。）
昨夜，網易有數產品經理路過開發的顯示屏前見到了類型這樣的一張圖：
於是想到有數能不能做出這樣的圖來？作為有數的開發的我在一邊思索了一下，開了一下腦洞，結合最近做的網易有數的新功能，覺得可以實現，於是就開始做一張。
首先，我們需要看上圖的x軸與y軸分別是什么，x雖然顯示的是月份，但是實為日期軸，而且是日期映射為“年-周”的日期軸，而且這些日期是有時間范圍的，這意味着我們需要添加日期篩選器。而這里的y軸則是“星期”(day of week)。這里我們使用最常用的超市訂單數據源來嘗試一下做出這樣一張圖表。
先插入一個“圖表”控件，先來完成放置x與y軸的工作。
我們把年放到X軸上，選擇年周日期映射函數，由於超過了200列，我們可以為它來添加一個篩選器，把訂單日期放入篩選器后點擊左下角的更多日期篩選方式，並用列表篩選，選擇2011。
下一步把訂單日期再拖放到Y軸上，並選擇日期（星期）日期映射函數。這樣在Y軸上就得到了1到7，表示一周7天的軸。
這里，有數把這種圖表自動推斷為表格，而不是小方塊，這是由於全部屬性面板中的圖表類型為自動，網易有數認為這種情形下表格最好。我們可以把全部屬性中的“自動”改為“並列柱狀圖”，於是就得到了下面的圖：
我們可以調整下下圖表控件的調度來讓里面的柱子變成正方形：
可以看到這些小方塊的顏色是沒有深淺的，這是因為什么的，這是因為顏色並不並未任何的度量，因為gitlab中小方塊圖的顏色是表示提交數的，所以“全部屬性”面板的顏色上應該有一個度量，這里我們可以把訂單中的數據拖入“顏色”中：
可以看到我們之前的控件大小被左上角的數量的圖例破壞了，為了把它去掉，我們可以在“圖表”面板“樣式”的tab中把圖例前的對勾去掉，另外原圖中也沒有軸線，在樣式中也可以調整為透明色或者白色：
這些交互在圖表的繪制區是沒有交互的，未來如果有數中如果加入使用的體驗會更好。於是這張圖就成了這個樣子：
現在看看與gitlab的圖相比還有沒有什么不同？首先這里是有軸名稱的，就是上面的年周（訂單日期）還有左邊的星期（訂單日期），只要雙擊圖表進入編輯頁面后在相應的區域中右鍵選擇“隱藏名稱”就可以做到這一點。（竊以為這里的方案應該改成隱藏軸名稱才好）。另外就是標題的隱藏，就是那行“數量(按星期(訂單日期)、年周(訂單日期)划分)”，這個的設置在“樣式”tab里中的第一行。好了，下面這張圖表就變成了：
還有幾處不一樣，一個是方塊的顏色，這個只需要在“顏色”面板中設置即可，另外不一樣的地方就是X軸的格式，這一格式可以在X軸訂單日期膠囊的日期顯示格式中選擇，然而，這一列表中並沒有提供英文月份的選項。但是由於背后處理日期格式的部分是我做的，實質上我們的服務器是支持這種月份的，只需要把格式改成MMM即可，由於我是有數的開發，這里先用我們有數中隱藏的“上帝模式來做到這一點”，於是就得到了：
可是還是沒有辦法對於一個月份只顯示一個，這里需要配置步長，但是我們並沒有開放這一入口，所以無法做到一模一樣。另外就是左側軸的問題，星期的格式不是英文的首字母以及一周的開始不是星期日而是星期一，這一點在產品設計的時候也有討論過，未來也許可以考慮讓用戶設置。首字母的這一點可以使用計算字段來完成，但是略有麻煩，這個計算字段如下：
IF DAYOFWEEK([訂單日期]) = 1 THEN "Mon"
ELSE IF DAYOFWEEK([訂單日期]) = 2 THEN "Tue"
ELSE IF DAYOFWEEK([訂單日期]) = 3 THEN "Wed"
ELSE IF DAYOFWEEK([訂單日期]) = 4 THEN "Thu"
ELSE IF DAYOFWEEK([訂單日期]) = 5 THEN "Fri"
ELSE IF DAYOFWEEK([訂單日期]) = 6 THEN "Sat"
ELSE IF DAYOFWEEK([訂單日期]) = 7 THEN "Sun"
但是，但是，由於目前的有數不支持自定排序，只支持字母序，所以Fri會排在第一個，Mon會排在第二個，Wed會在最后。本質上這里應該是一個日期的數據字典，但是這一日期加了日期映射函數，對於這種數據字典的設置有些問題，所以目前也無法滿足這里的需求。
總結：
從上面的過程來看，有數對於制作圖表的功能還是十分強大的，因要照貓畫虎做一些圖表還是能做到八九不離十的，這里的熱力圖就印證出了這一點，它是通過各種數據膠囊的放置與樣式的配置來得到的。但是在一些細節上，比如隱藏軸名稱，標題名稱等配置入口還需要綜合整理，加入月份的日期格式或是開放讓用戶自行配置，日期的步長值也需要開放讓用戶配置。此外就是自定義排序的設置以及更加強大的數據字典等功能，這些細節真的是需要長時間細細的打磨。
看完這篇文章，是不是想自己試試看呢，快來吧網易有數 - 網易大數據|專業的私有化大數據平台
了解 網易雲 ：
網易雲官網：https://www.163yun.com/
新用戶大禮包：https://www.163yun.com/gift
網易雲社區：https://sq.163yun.com/