前言

其實寫本文的初衷只是想分享一個css新特性【scroll-timeline】,但是我想要體現出它的強大效果，此時正好想到了之前看到過釘釘的首頁動畫，就是滾動頁面然后進行一系列動畫的，所以我決定實現一下這個效果。（見上方動圖，只是實現了大體效果，細節沒有優化，各位看官多多擔待）

它是干什么用的呢？
一句話概括為：“用滾動區域的滾動動作驅動動畫的進度”。

可能有些同學還不太懂，我再稍加解釋。我們以往的animation都是以時間作為動畫的時間線的，比如我們需要設置動畫的總時長animation-duration為 n 秒，那么動畫在進行 n 秒后，就會處于 100% 的狀態。

而當我們使用了scroll-timeline之后，以滾動動作驅動動畫的進度，那么就是我們在滾動區域滾到底時，動畫就會處于100%狀態，即滾動了百分之多少，動畫就會進行百分之多少。還不明白可以體驗下方的小demo

以前如果要實現這種效果，往往得監聽 scroll 事件，用js動畫實現，總體來說非常復雜，但是有了這個新特性之后，為css的創造性又提升了一個臺階。

API 使用方法

1?? 首先我們需要在滾動區域上定義一個滾動時間線，滾動時間線需要設置兩個值：

1. scroll-timeline-name: 命名的滾動進度時間線的名稱；
2. scroll-timeline-axis: 以哪個方向的滾動條驅動動畫，即滾動方向；

可選的滾動方向有：

• block: 滾動條元素塊軸上的滾動條，該軸垂直于一行中的文本流的方向。對于水平書寫模式，如標準英語，這與y相同，而對于垂直書寫模式，它與x相同。這是默認值。
• inline: 滾動條元素的內聯軸上的滾動條，該軸與一行中的文本流平行。對于水平寫入模式，這與x相同，而對于垂直寫入模式，它與y相同。
• x(Firefox語法為 vertical): 滾動區域垂直軸上的滾動條；
• y(Firefox語法為 horizontal): 滾動區域水平軸上的滾動條。

2?? 然后在滾動區域內需要執行動畫的元素上，將動畫時間線設置為我們定義的滾動時間線的名稱。設置完成后，該元素的動畫進度就會變成通過滾動動作驅動。

實現釘釘首頁特效

1. 總體分析

經過我十幾分鐘的分析，將這個復雜的特效切割成了三部分：

1. logo部分向上，向屏幕外移動，滾動一段時間后不透明度逐漸降低，最終從上方消失；
2. 色塊有3d的深度效果，滾動時逐漸向屏幕外擴散，并最終都移動到屏幕外；
3. 菜單面板在logo快消失時，從屏幕中心一個點逐漸擴散開來，并在快擴散成型時出現灰色背景；

分析結束后，開始動工?。

2. 整體布局

首先創建一個寬高滿屏的div，為了方便后面描述，我們叫這個div為【滾動盒子】，并設置黑色背景。
然后添加一個子元素，設置高度大于100%，這樣父元素就能滾動了，不然無法驅動動畫執行，這里我隨便設置了高度200%。

那么有動效的元素（我暫且叫它【動效盒子】）在滾動盒子中如何定位呢，總不能就在文檔流中吧，那豈不是滾動區域滾動的時候，整個動效盒子也會被來回滾動，甚至滾出可視區域。這樣顯然是不行的，并且設置 absolute 絕對定位也是不行的，同樣會跟隨滾動。

得出結論： 為了讓動效盒子不在滾動盒子內滾動，只能考慮 fixed 固定定位和 sticky 粘性定位，兩者都可以實現，但是 fixed 定位不太靈活，一旦修改滾動盒子的位置，就得跟著調整動效盒子的位置。所以最終我給動效盒子設置寬高100%，并粘性定位于滾動盒子頂部。

布局結構大致如下：

:root {
  --mainHeight: 100vh;
}

#container {
  position: relative;
  height: var(--mainHeight);
  overflow-x: hidden;
  overflow-y: scroll;
  background: #040506;
}

#stretcher {
  height: calc(2 * var(--mainHeight));
}

main {
  pointer-events: none;
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--mainHeight);
  overflow: hidden;
}


//滾動盒子
 <div id="container">
    //動效盒子
    <main>
       //這里面是實現動效的元素
    </main>
    
    //撐開父元素高度，讓父元素可以滾動
    <div id="stretcher"></div>
 </div>

3. logo動效

因為動效是 3D動效，所以我們先在動效盒子設置下3D效果和視距：

main{
    transform-style: preserve-3d;
    perspective: 500px;
}

然后就是設置lodo的動畫了，運動軌跡很簡單，translate3d向上向屏幕外移動就行了，因為logo在消失之后還會繼續面板動效，所以我假定logo動效大概占總動效時長 2/3。將動畫綁定了滾動時間線后，只需要觀察在logo從頂部消失時，滾動條大概滾動了 2/3 即可，慢慢調整參數。

?需要注意的是：因為logo是在快移動出屏幕時才逐漸變透明，所以需要單獨設置個透明度變化的animation。

.logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  animation-name: logo,logohide;
  animation-fill-mode: forwards;
  animation-timeline: --squareTimeline;
}
@keyframes logo {
  100% {
    transform: translate3d(-50%, -400px, 500px) scale(.6);
  }
}
@keyframes logohide {
  55%{
    opacity: 1;
  }
  63%,100% {
    opacity: .2;
  }
}

4. 色塊動效

色塊動效和logo動效差不多，也是 translate3d 的變化。因為他們作為一個整體在運動，新建個色塊盒子，所有色塊都扔里面設置絕對定位，通過 translateZ 呈現3d效果。

.blocks {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  animation-name: block;
  animation-fill-mode: forwards;
  animation-timeline: --homeTimeline;
  transform-style: preserve-3d;
  perspective: 500px;
}

.blocks span {
  --color: red;
  --left: 10%;
  --top: 10%;
  --z: 0;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--color);
  transform: translateZ(var(--z));
}

@keyframes block {
  100% {
    transform: translate3d(-50%, -500px, 300px);
    width: 270%;
  }
}
    

 <!-- 色塊部分 -->
  <div class="blocks">
    <!-- 左色塊 -->
    <span style="--color:#261758;--left: 26%;--top: 40%;--z: 120px"></span>
    <span style="--color:#c8940b;--left: 10%;--top: 60%;--z: -50px"></span>
    <span style="--color:#2059a3;--left: 15%;--top: 100%;--z: -200px"></span>
    <span style="--color:#562c0e;--left: 5%;--top: 90%;--z: -60px"></span>
    <!-- 上色塊 -->
    <span style="--color:#051235;--left: 50%;--top: 40%;--z: 20px"></span>
    <span style="--color:#17113a;--left: 40%;--top: 30%;--z: -40px"></span>
    <span style="--color:#06143a;--left: 45%;--top: 70%;--z: -250px"></span>

    <!-- 右色塊 -->
    <span style="--color:#072e90;--left: 70%;--top: 40%;--z: 100px"></span>
    <span style="--color:#0ca15b;--left: 80%;--top: 60%;--z: -50px"></span>
    <span style="--color:#479ec8;--left: 76%;--top: 70%;--z: 50px"></span>

    <!-- 下色塊 -->
    <span style="--color:#072e90;--left: 75%;--top: 150%;--z: -300px"></span>
    <span style="--color:#061640;--left: 30%;--top: 125%;--z: -200px"></span>
  </div>
</main>
<div id="stretcher"></div>

5. 面板動效

面板動效是最復雜的，整體呈現為從中心點擴散成列表模式。逆向思維一下，其實這個動畫的實質是先設置成列表形式，然后在動畫 0% 時將所有元素移動縮小到中心點。

麻煩點來了，怎么確定每個元素移動的距離就能移動到面板中心點呢？我想了個辦法，我先在面板中心顯示了一個小點，如下：

然后在控制臺不斷設置元素的 translte 移動距離，直至和小點重合（先把元素scale成一個小點）。這樣就可以很輕松獲取到每個元素位移到中心點的距離。（ps：因為每行有7個元素，其實只需要調試獲取到第一行的前四個元素的tanslate距離就行，第一行后面的三個就是把前面三個點x改為負值，第二行則負復制第一行，把y全部改為負值）

可以看到，已經成功實現了圖標從中心點擴散，但似乎叮叮的圖標像是一個一個出來的，所以還需要改進。 觀察叮叮的面板動效得知，圖標是從最外側的兩列開始出現，然后再是里面的兩列，以此類推。

簡單，只需要設置動畫延遲就行。但是被綁定滾動時間線的動畫無法設置 animation-delay 動畫延遲，那只能在動畫內容里下文章，1,7列是45%開始移動，2,6列是50%開始移動，3,5列55%開始移動，最中心第4列60%開始移動。

面板背景色顯示邏輯差不多，在動畫70%時再開始設置背景色。

emmmm，差不多了，就這樣吧～ 完結撒花

效果體驗

點擊碼上掘金右上角“查看詳情” 滾動鼠標滾輪查看效果。只是實現了大體動效，沒有調整細節，多調調參數應該可以做到和釘釘首頁99%相似度。

釘釘應該是用js監聽滾動實現的這個復雜效果，可以看到，當我們使用css新特性 scroll-timeline 之后，這個動效完全就可以用純css實現了，簡單了很多

最后

更新補充一下兼容性：目前這個css屬性還是項實驗性技術，真要應用在生產環境可能還需要些時日，但是不得不說，css越來越強大了！我們要做一個驕傲的前端仔！

輯導語：數據可視化圖表種類如此之多，什么場景下應該用什么圖表展示，是一個讓人頭禿的難題。本文作者總結各種圖標的優勢和類型。感興趣的小伙伴們，一起來看看吧！

一、前言

“大屏”，這個詞最近幾年來被廣泛地提及，幾乎各行各業都希望通過“大屏”這種方式來將自己的產品或業務進行數字化升級。同時，也就吸引越來越多的設計師看好可視化大屏在未來的前景。

作為一種交互和視覺都相對炫酷的界面展示方式，不僅能夠將多種場景同時展示在一個屏幕上，同時，也可以給觀者帶來強烈的視覺沖擊力，使其直觀地了解到想要關注的實時動態信息，或者通過大屏上的數據圖表來分析出當前及未來的現狀、趨勢等。

二、什么是數據可視化？

首先我們先來了解一下，什么是“數據可視化”？

數據可視化就是將抽象概念進行形象表達，將抽象語言進行具象圖形可視的過程。簡單理解，就是將數據以視覺的形式來呈現，如圖表或者地圖，從而幫助人們了解這些數據本身以及背后的意義。

三、數據可視化的原則

數據可視化一個基本的原則，就是將具有價值的數據和洞察，通過簡潔、準確、突出洞察的圖表表現出來。

所以，將數據可視化不單單是簡單的圖表的羅列，更重要的是說明數據背后的意義（實際問題&解決方案）；然而很多時候我們只是展示了很多炫酷的圖表，但沒有解決任何實際的問題；或者具有高價值的數據信息，沒有使用合適的呈現方式，導致表達不清楚，輸在了這“臨門一腳”。

我們用一個簡單的關系圖來示意一下，一個可視化圖表是否體現出了它應有的價值。

一個圖表既需要提供出可供參考的價值，也需要兼顧讀者理解信息的速度，如果只是提供了價值，但是理解起來比較耗時，那么它一定是低效的；若是清晰地展示數據信息，但是不能夠提供足夠的價值，那么也只是“空有外表，欠缺內在”。

所以我們在設計一個圖表之前，就需要我們知道數據有哪些字段構成、每個字段的數據類型、字段之間的依賴關系等。思考如何用簡潔的架構完整的描述業務。

在這里舉個簡單的例子，比如鐵道行業——“什么時間？哪位員工？在哪個地點？執行了什么作業？以及具體的作業內容”

當然，這樣的數據是靜態的。當面對我們的客戶時，他們會更關心問題和答案。而問題通常不是一個單一的問題，而是一連串問題的組合，尋找問題的過程更像是“剝洋蔥”。

在業務分析的過程中，都是不同維度層次之間的鉆取和關聯分析，簡單的問題只有一個數據層次，復雜的問題則同時包含多個數據層次及其相互關系。分析數據的過程就是在問題對應的數據層次上，完成聚合分析。站在不同的視角對于一組數據的關注點也會不同。

做為設計師，當我們將一組數據進行數據可視化時，往往是已經經過處理過的數據，我們只需要對圖表進行優化即可，而不用去關注原始的數據是如何處理的，在這種情況下設計師的任務就相對來說比較簡單了。

但是對于原始數據的處理和分析其實是非常復雜的，有機會和大家分享一下數據背后的故事。

盡管做為設計師只要將數據圖表進行優美的設計，但大多數的設計師是不知道什么才是好的可視化圖表，這也是寫這篇文章解決大家這些問題的初衷。

在設計時，大多數的設計師都是根據自己的第一主觀感受或者結合自身經驗的積累去判斷一個圖表的好壞。而不是根據科學的方法來去衡量一個圖表是否是好的圖表。在此給大家一個驗證數據可視化圖表設計的“黃金公式”。

我們到底該如何去評判一個圖表的好壞？不是通過主觀地、帶有經驗性質的感覺，而是要有科學地依據進行分析和論證，有相對應的指標去衡量。這樣才能避免我們走很多不必要的彎路。而這個科學的依據就是“GLAD原則”，是我們驗證一條數據可視化的“黃金公式”。

GLAD是由四個短語的開頭首字母構成：Good Data and Insight、Less Noise、Accurate Expression、Distinct Mark。它們是黃金公式中四項重要組成部分。探索性數據分析注重內涵，解釋性數據分析注重外表，一個好的圖表需要內外兼修。GLAD原則，作為優化圖表設計的理念，是兩者兼顧的。“G”在探索性數據分析過程中著重提升圖表的價值，“LAD”在解釋性數據分析中幫助讀者加快理解信息的速度。

四、使用可視化圖表的優勢

將數據可視化的優勢是顯而易見的，我們通過最簡單的方式來傳遞最準確的信息。通過對于數據的分析、處理，加快人們理解信息的速度，最大化地提供數據所能夠帶來的價值。

數據可視化是對數據進行圖形化的處理來進行展示，傳達數據背后的價值。而數據是對行為的度量結果，無論是大數據還是小數據，都可以拆分成兩個部分：類別和度量指標。

數據分析一般會分為三個步驟：數據清洗、數據建模、數據可視化，這就像烹飪的過程：洗菜切菜、炒菜、上菜擺盤

我們想要提高讀者理解信息的速度，就需要通過對圖表的設計來提升。圖表類型、配色方式、線條粗細、字體大小、坐標軸高度、標題位置、刻度線疏密、圖例的擺放等細節都會影響到讀者理解信息的速度，也都有講究的規定。

早期，工作于AT&T貝爾實驗室的統計學家William S. Cleveland及Robert McGill曾發表過《圖像感知：研究圖像化方法的理論、實踐和應用》。對于如何根據功能選擇最佳圖表形式提出了指引。作者設計了一個包含10項基本感知任務的列表，每項任務代表展示數據的一種方法并進行了排序。從而給我們在視覺表現方面一些指導性的方向。

我們在優化圖表的過程中，有的時候可能并不會因為認知判斷準確性的高低從而確定一個圖表的優劣，而是在大多數情況下對整體的認知判斷準確性進行全局的感知。所以我們在進行數據可視化的過程中，既要清楚地認識到每種圖表的使用規則和場景，選用正確的圖表來表現數據，也要對其在視覺感知方面進行整體的思考和優化（視覺+交互）即，應用好GLAD原則。

五、可視化圖表由哪些組成

選擇一個正確的度量值往往是解決問題的關鍵，現代管理學之父彼得.德魯克的一條“金句”曾道破度量的重要價值：“如果你不能度量它，就無法改進它”。

如果我們要度量它，就要先認識它。

既然我們已經深刻地認識到可視化圖表的優勢所在——簡潔、準確、突出洞察，以及在可視化大屏中的重要地位，我們就應該對于一個完整的圖表有一個全面的認識和了解。

什么是好的圖表？一個完整的圖表都由什么元素組成？元素對于讀者理解信息有哪些影響？應該避免哪些問題可以提高讀者對于信息的速度？等等問題，都是作為一個可視化大屏設計師應該掌握的基本功。

根據前文的介紹，我們可以知道對于一個圖表的好壞，可以通過GLAD原則去檢驗。工欲善其事，必先利其器，只有先全面的了解和認識圖表的組成元素，才能在設計時游刃有余。接下來，我們分別介紹一下圖表的組成有哪些。

1. 標題與副標題

圖表標題，包含標題和副標題，其中副標題是非必須的。

標題的主要作用是對圖表的主題進行概述，副標題則是對標題進行補充說明，或者說明數據的來源等，就是為了方便更直觀的了解到圖表主題和內容。

從前端開發的角度來看，標題只有一些文字信息，所以標題的配置無非是一些定位、字體大小、顏色等，不過也有些標題可以加入超鏈接屬性。

所以，我們就可以考慮對標題文字的字體、字號、顏色、位置等方面作為優化的方向。當然如果要同時顯示標題和副標題時，我們也要考慮到兩者之間的間距。

2. 圖例

圖例是圖表中用不同形狀、顏色、文字等，用來標示不同數據列，通過點擊標示可以顯示或隱藏該數據列。

2.1 圖例容器樣式

圖例容器指的是整個圖例容器的樣式，包含背景、邊框、邊距、寬度等。

在對圖例的樣式優化中，我們可以通過對圖例容器的背景色、邊框顏色、大小（寬、高）、陰影等方面作為優化方向。也可能出現一個圖表中數據度量項過多，圖例在整個圖表占比過大的現象，我們也可以采用分頁的形式進行視覺上的減壓，在交互上面進行突破。

2.2 圖例項樣式

圖例容器的樣式可以控制圖例整體樣式，圖例的具體內容則是通過圖例項相關屬性來控制的。我們不僅要考慮到容器的設計，也要更關注于圖例項本身。

關于圖例項的基本樣式，即大小、顏色、圓角等，圖例項可以通過標示顏色的不同來代表不同的類別（注：同一組圖例中，盡量避免出現相近的顏色，可以提高圖表信息讀取的速度），還有上邊提到的不同狀態下的設計樣式，比如圖例隱藏時的樣式，鼠標劃過時的樣式，圖表項在容器中的位置以及之間的相對位置關系。

2.3 圖例內容及定位

圖例內容，即表示圖例的文字說明。

圖例在圖表中的對齊方式有左對齊、居中對齊、右對齊，圖例內容的布局方式有垂直布局和水平布局。

3. 坐標軸

笛卡爾圖表（普通的二維數據圖）都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側）。

3.1 坐標軸標題

坐標軸標題。一般情況下，x軸沒有標題（一般展示類別），y軸通常是數據的度量指標。

3.2 坐標軸刻度標簽

當我們的數據值相對密集，我們可以通過y軸坐標軸標簽步進的方式來減少視覺上的壓力。同理如果x軸的數據維度也非常多，我們也可以通過步進的方式去進行優化。除此之外，這里我們也可以通過交互層面去優化，比如可以將x軸的標簽設置為可拖動的。

3.3 坐標軸刻度

坐標軸的刻度一般我們設計時比較容易忽略，但是在圖表中我們通常能夠通過這個小小的刻度來確定對映區間的數據值。我們也通過調整刻度，從而減少視覺的壓力。不過這種調整，雖然和上面的在“坐標軸刻度標簽”中的優化方法一樣，但是其背后的邏輯是不相同的，前者只是改變了顯示間隔，而后者是真正意義上的調整刻度。

同時我們在圖表的優化過程中，可以對坐標軸刻度線的長度、寬度、顏色進行優化，也可以對刻度線的位置進行修改，比如是放在刻度標簽的下邊，還是在刻度標簽的中間。

4. 標示線

標示線是用來標記坐標軸上特殊值的一條直線，在繪圖區內繪制一條自定義的線。標示線總是垂直于它屬于的軸。它可單獨定義在x軸或y軸，也可以同時定義在x軸和y軸。如果標示線同時定義在x軸和y軸，定義在y軸的標示線會顯示在前面。

視覺上，我們可以通過對標示線的顏色、粗細、線條樣式（虛線、實線）等進行設計優化，以及標簽（標示線的文字說明）的位置、顏色等。

5. 標示區域（標示帶）

標示帶同標示線，只不過標示的內容為一段范圍。標示帶的作用、事件等很多都類似標示線。

6. 導出功能按鈕

導出功能按鈕可增加圖表導出為常見文件功能，一般都是用icon與下拉列表組合使用。常見的導出格式有png、jpeg、svg、pdf等。

7. 數據列

數據列即圖表上一個或多個數據系列，比如曲線圖中的一條曲線，柱狀圖中的一個柱形，也就是我們所見的各種圖表的表現形式。

8. 數據提示框

當鼠標懸停在某點上時，以框的形式提示該點的數據，比如該點的值、數據單位等。數據提示框內提示的信息完全可以通過格式化函數動態指定。

9. 版權標簽

版權標簽一般顯示在圖表右下方的包含鏈接的文字，默認是自己公司的官網地址。但在大屏展示時，通常會隱藏信息。

六、數據可視化圖表的類型

前面我們已經知道一個完整的圖表都是由哪些元素組成，接下來我們就來認識一下圖表都有哪些類型，哪些圖表可以分為一類，我們該如何選擇合適的圖表來進行數據可視化。

當我們真正去應用它的時候，會發現很多場景不是簡單地按照圖中的思維線就可以找到適合的圖表，甚至事實與指導方向大相徑庭，仍然需要很多客觀的思考與辨證的判斷。如果我們按圖索驥，會發現其中很多邏輯概念，以專業的數據分析視角來評價是存在紕漏的。

該思維指南圖的核心問題是以“你想展示什么”為起點，這是個極其龐大、復雜的話題，很難實現面面俱到，這導致“比較、構成、聯系、分布”這四個大類不能構成一個完整體，必定有遺漏。例如想要展示異常點、趨勢、聚類、排名，這些是不是也應該與四大類并列加入到展示的信息中呢？

而且，“比較”這個詞屬于綜合性概念，所有的圖表都可以稱為數據的“比較”，該詞注定與其他類別有重疊的部分。這樣簡單地劃分四個大類顯然違背了數據分析領域的基本常識——MECE原則（Mutually Exclusive Collectively Exhaustive）：不重疊、不遺漏。

不過也不能完全否定這張圖表的價值，雖然邏輯上有問題，但該思維指南圖本身是具有設計性和啟發性的，我們從中也可以受到一些啟發，像構成、聯系、分布等很多圖表都有其流行的應用場景，如靜態時間的構成常用餅圖，動態時間的構成可以用堆積百分比條形圖，這就好像在咖啡廳、酒吧、婚禮、健身房、辦公室等場景播放音樂，需要先領會不同音樂風格——藍調、爵士、古典、搖滾等，再去配合各種場景靈活使用。

所以，我們還是要回歸我們究竟要展示哪些信息上來，但我們不應該被既定的框架束縛住，而是要根據我們要展示的數據來選擇合適的圖表。

選定可視化圖表類型圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是“我有什么數據，需要用圖表做什么”，而不是 “圖表長成什么樣”。基礎圖表有直線圖、曲線圖、曲線面積圖、面積圖、面積范圍圖、柱狀圖、條形圖、餅圖、散點圖、氣泡圖、儀表圖等。還有一些和股票相關的圖表類型，包括 K 線、分時圖、蠟燭圖等，以及大數據量的時間軸圖表。還有地理信息相關的地圖，地圖中可以包含地圖區域、線、點、氣泡等元素。

1. 直線圖和曲線圖

用于反映事物隨時間或有序類別而變化的趨勢。直線圖是用直線將一系列的數據點連接的圖表，直線圖經常用來展現隨著時間變化的數據。曲線圖是用曲線將一系列的數據點連接的圖表。使用建議：Y 軸刻度值選擇要合理，當前顯示的數據波動要最大化的顯示；顯示數據盡量大于3條，否則不能夠清晰地反映出數據隨時間變化的趨勢。

2. 面積圖

包括普通的面積圖及面積范圍圖，根據面積連接線的不同，又可以分為直線面積圖和曲線面積圖當我們在設計大屏時出現過多的折線圖，或者感覺圖表與標題（設計復雜）的樣式不匹配時，我們可以進行豐富圖表的表現力，使用面積圖來撐起畫面，讓畫面整體看上去不單薄。

3. 柱狀圖&條形圖

柱狀圖是用豎直的柱子來展現數據，一般用于展現橫向的數據變化及對比。條形圖是用橫向的柱子來展現數據，一般用于縱向的數據排名及對比。

使用建議：注意每個數據分類的寬度以及不同分類之間的間距，數據之間的間隔與寬度最好是1.2~1.5倍

要選用適當的圓角，避免使用大圓角，會造成認知理解混亂，同時也不是很美觀。

當每個數據分類項文字過長是，可以將柱狀圖轉化成條形圖，緩解視覺壓力；這也是條形圖相對于柱狀圖的一個優點，同時當要展示的數據分類項過多時，我們也可以用條形圖來減少圖表所占用的寬度，因為在我們設計大屏的過程中，圖表的數據展示區域寬度往往是固定的，不會有太多的橫向空間是圖表完全展示，這時我們就可以考慮條形圖。

當我們想要強調其中一個數據分類項時，可以使用不同的顏色進行區分，但此時要保證唯一變量（即顏色不超過兩個）。

4. 餅形圖

餅圖以扇區的形式顯示每一個數值相對于總數值的大小。通過不同的扇面大小，表達了不同類別的比例，即一個數據組中不同數據項的數據大小占所有數據和的比例；并通過帶顏色的圖例將扇面和數據項一一對應起來。所以當我們想要一組數據中每個數據類型所占的比例時，就可以優先選擇餅形圖。餅形圖可以分為基礎餅形、環形圖以及扇形圖。

5. 環形圖

環形圖是餅圖的一種變形，通過去掉中心部分，使環形圖在視覺上看上去更輕盈，避免由于餅圖大面積色塊帶來的視覺壓力，但它依然能夠表達出和餅圖相同的含義以及不同數據項之間的占比關系。在使用環形圖時，我們要注意環形圖的粗細，避免出現圓環過粗或者過細的情況，這樣都會影響在視覺上的美觀程度。

6. 扇形圖

通過設置餅圖圓周的開始角度和結束角度，我們可以將餅圖變成扇形圖。

7. 范圍圖

范圍圖包括面積范圍圖、曲線面積范圍圖及柱形范圍圖，也可將范圍柱狀圖變成范圍條形圖。

8. 散點圖和氣泡圖

散點圖和氣泡圖常用于展現數據的分布情況。通過數據之間的位置分布來觀察變量之間的相互關系。數據之間的相互關系主要分為：正相關（兩個變量值同時增長）、負相關（一個變量呈現增長分布另一個變量呈現下降分布）、不相關、線性相關、指數相關等。而分布在集群點較遠的數據點，被稱之為異常點。散點圖經常與回歸線（就是最準確地貫穿所有點的線）結合使用，歸納分析現有數據以進行預測分析。

氣泡圖是一種多變量圖表，是散點圖的變體，也可以認為是散點圖和百分比區域圖的組合。與散點圖一樣，氣泡圖使用笛卡爾坐標系沿網格繪制點，其中 X 和 Y 軸是單獨的變量。然而，與散點圖不同，每個點都分配有標簽或類別（顯示在圖例旁邊或圖例上）。然后，每個繪制點通過其圓的面積表示第三個變量。

顏色還可用于區分類別或用于表示附加數據變量。時間可以通過將其作為一個軸上的變量來顯示，也可以通過動畫數據變量隨時間變化來顯示。

氣泡圖通常用于通過使用定位和比例來比較和顯示分類圓圈之間的關系。氣泡圖的整體情況可用于分析模式/相關性。太多的氣泡會使圖表難以閱讀，因此氣泡圖的數據大小容量有限。

這可以通過交互來解決：單擊或懸停在氣泡上以顯示隱藏信息，可以選擇重新組織或過濾分組類別。與比例面積圖一樣，需要根據圓的面積而不是半徑或直徑來繪制圓的大小。圓圈的大小不僅會呈指數級變化，還會導致人類視覺系統產生誤解。

9. 漏斗圖和金字塔圖

漏斗圖往往展現的是每個階段數據的減少情況，例如在銷售中各個階段的流失情況。金字塔圖是由多個塔層組成的金字塔形狀的圖形，其中每個塔層的高度和其點的值有關。在技術層面上，金字塔圖是一個倒置的漏斗圖（沒有漏斗頸）。

10. 雷達圖

雷達圖又稱極地圖、蜘蛛圖。雷達圖的 X 軸展現為雷達圖的圓周（即沿著圖形的圓周的是 X 軸），Y 軸則表現為圓心到圓的頂端（即圓的半徑線），即極地圖中的圓周線、半徑線及相關的文字可以通過坐標軸相關的配置來控制。

雷達圖能直觀地呈現某一個對象多維度的數據，幫助我們了解該對象的能力分布情況，常被應用于能力評分、用戶畫像等場景。那么什么是多維度呢？即要求數據組中的數據可以被歸類為多個互相獨立的類目。

雷達圖實際的運用價值，具體可以分兩部分：一是在描述單一對象上的運用，二是在對比多個對象上的運用。使用建議：指標得分接近圓心，說明處于較差狀態，應分析改進；指標接近圓的頂端，說明度量值越高；數量控制在5-8個最佳。

11. 瀑布圖

瀑布圖是用一系列正負值的形式表現數個數值累計及變化情況，因其形似瀑布流水而得名。

12. 誤差線圖

誤差線圖通常表示數據的可變范圍、誤差范圍。誤差條可用作圖形增強功能，可將繪制數據在笛卡爾圖上的可變性可視化。誤差條可應用于散點圖、點圖、條形圖或折線圖等圖表，以提供所呈現數據的額外細節層。

誤差條有助于指示估計的誤差或不確定性，以大致了解測量的精確度。通常，誤差線用于顯示范圍數據集中的標準偏差、標準誤差、置信區間或最小值和最大值。

為了可視化這些信息，誤差線通過繪制從繪制數據點（或帶有條形圖的邊緣）的中心延伸的帶帽尖的線來工作。誤差條的長度有助于揭示數據點的不確定性：較短的誤差條表示值集中，表示繪制的平均值更準確，而較長的誤差條表示值更分散，并且不太可靠。

同樣取決于數據的類型，每對誤差條的長度往往在兩側的長度相同。但是，如果數據有偏差，那么每一邊的長度就會不

平衡。誤差線始終平行于定量刻度軸，因此它們可以垂直或水平顯示，具體取決于定量刻度是在 Y 軸還是 X 軸上。如果

有兩個定量標尺，則兩對誤差條可用于兩個軸。

13. 徑向條形圖

徑向條形圖只是在極坐標系上繪制的條形圖，而不是在笛卡爾坐標系上。雖然它們看起來很酷，但徑向條形圖的問題在

于條形長度可能會被誤解。即使它們代表相同的值，外部的每個條形都相對較長。

這是因為每個條必須有不同的半徑，所以每個條都根據它的角度來判斷。我們的視覺系統更擅長解釋直線，因此笛卡爾

條形圖是比較值的更好選擇。因此，徑向條形圖主要是為了視覺美觀的原因。

七、常用的圖表開源網站

1. echartsecharts

網站鏈接：https://echarts.apache.org/examples/zh/index.html

2. highcharts

網站鏈接：https://www.highcharts.com.cn/demo/highcharts

3. antv

網站鏈接：https://antv-g2.gitee.io/zh/examples/gallery

八、回顧總結

我們回顧一下，這篇文章主要是講了三個部分：

第一部分主要說明一下什么是數據可視化，講的是數據可視化基本的原則，就是將具有價值的數據和洞察，通過簡潔、準確、突出洞察的圖表表現出來。以及根據GLAD原則去評判一個圖表的好壞；

第二部分主要說明了一個圖表的組成都有哪些？從而做為我們可以優化圖表的方向；

第三部分主要介紹了一些比較常見的圖表類型，從開發的角度去考慮實現以及思考如何能夠更好全面地掌握每一個圖表

細節。

文章參考

【1】數據可視化設計必修課（一）：圖表篇：https://www.uisdc.com/data-visualization-chart

【2】圖表來源：https://www.highcharts.com.cn/demo/highcharts

https://antv-2018.alipay.com/zh-cn/vis/chart/index.html

【3】政務可視化設計經驗-圖表習慣：https://tob.design/#/experience/detail/307

【4】參考書籍：《樂見數據：商業數據可視化思維》

本文由郝小七指導http://www.woshipm.com/u/917803

本文由 @四月 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。