友設第 10 篇原創文章
2021 年原創文章目標第 8/50 篇
這裡專門分享乾貨，歡迎關注~
隨著網際網路數位化越來越完善，數據可視化這個詞的使用頻率也越來越高，而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是後臺設計，都離不開圖表的使用。然而關於圖表類相關的資料太零碎了，不成體系，對於初學者非常不友好，本篇文章我從圖表的祖輩開始，把它都給挖了出來，希望對你有幫助。（如果圖片看不清，可以點開放大看~）
正文約：3800 字，預計閱讀時間：10 分鐘
一 什麼是圖表
圖表的定義：可直觀展示統計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。
英文叫法：Chart。
用戶對圖形的敏感程度遠遠大於文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。
接下來我們來介紹圖表的具體構成及元素解析。
二 圖表的構成
圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有他存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。
三 圖表元素解析
3.1 標題
顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。
標題的常用位置有 3 個：左上角、頂部居中、底部居中。
一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什麼的。
特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：
3.2 圖例
3.2.1 圖例的組成
顏色、名稱、數值、單位。
3.2.2 圖例的展現形式
圓形、開關、矩形、鼓包線、實線、虛線。
3.2.3 圖例的位置
從左至右、從上至下。
3.2.4 圖例的作用
標識出每個顏色所代表的的類別；
開啟 / 隱藏數據顯示；
圖例顯示的數值一般為當前值。
3.2.5 圖例的顏色選擇
同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。
產品使用中，要規範圖例顏色使用，一般分為兩種：
3.2.6 圖例過多時如何展示
3.2.7 共用圖例
如果多個 chart 的圖例一樣，可進行合併，減少冗餘圖例。
3.2.8 圖例省略
如果 chart 中只有一個圖例的話，可省略。
3.2.9 圖例名稱限制
根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值後省略展示。
3.3 坐標軸
坐標軸分為 X 軸和 Y 軸，常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到2X+Y 或 X+2Y。
3.3.1 刻度值代表的意義
3.3.2 坐標軸使用規則
是否帶單位：
對齊方式（常用，但非必須）：
刻度值過多時如何顯示：
可選擇規律性省略刻度名稱；
傾斜文字以顯示更多的文案。
刻度值的選用一定要是同一個規律，禁止同距離的刻度值代表不同數據。
刻度點的樣式使用規則：
3.4 數據展示
數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。
數據展示的使用規則：
3.5 網格線
3.5.1 網格線的作用
呼應坐標軸，美觀度。
3.5.2 網格線的使用規則
3.5.3 使用場景
橫、縱、橫縱結合、無網格線。
3.6 提示信息
通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息儘量簡化，信息量不要太大，言簡意賅就好。
3.7 水位線
根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值後，就會觸發某種聯動。這個時候就需要有個水位線了，它起到警示的作用。
形式有兩種，實線和虛線，顏色的選取則取決於產品的警告級別。
水位線可以是一個，也可以是多個，視情況而定。
3.8 時間軸
時間軸可以靈活地調節刻度值的上下限，從而更精確的看到自己想看的數據。
時間軸的功能及限制沒有不是很複雜，所以就不過多解釋了，需要用的話就用。
四 圖表使用建議
4.1 折線圖 line
4.1.1 定義
折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用於顯示在相等時間間隔下數據的趨勢。
折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。
4.1.2 使用場景
常用於觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。
4.1.3 使用建議
4.2 面積圖 area
4.2.1 定義
面積圖和折線圖比較類似，區別在於面積圖把數據區域做了個面積劃分，讓數據的顯示更加清晰。
4.2.2 使用場景
面積圖展示儘量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。
4.2.3 使用建議
4.3 柱狀圖 bar
4.3.1 定義
柱形圖，又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用於較小的數據集分析。
4.3.2 使用場景
4.3.3 使用建議
4.4 餅圖 pie
4.4.1 定義
餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別佔總數據的百分比的一種圖表。
4.4.2 使用場景
常用於做總結、年度匯報等；
所有數據相加必須是 100% 才可用。
4.4.3 使用建議
4.5 環形圖
4.5.1 定義
環形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。
4.5.2 使用場景
4.5.3 使用建議
環形圖的開始點為 0/12 點位置；
環的粗細要合理，不要太粗和太細；
4.6 堆疊面積圖
4.6.1 定義
堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。
4.6.2 使用場景
常用於不同資源中流量 / 容量的使用。
4.6.3 使用建議
不要有重複的顏色；
儘可能的把數據量按大小的順序，由下至上的堆疊。
4.7 堆疊柱狀圖
4.7.1 定義
堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。
4.7.2 使用場景
常用於不同維度下相同幾個指標的展示。
4.7.3 使用建議
4.8 非常用圖表
上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止於此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我後面再寫一期冷門圖表的使用建議：
雷達圖，散點圖，K 線圖，盒須圖，熱力圖，旭日圖，桑基圖，樹圖，漏鬥圖，儀錶盤。
五 常用的圖表開源網站
5.1 echartsecharts
https://echarts.apache.org/zh/index.html
5.2 highcharts
https://www.highcharts.com.cn/
5.3 antv
https://antv-g2.gitee.io/zh/examples/gallery
總結
Chart 是數據可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產品中用到最合適的那一個。
如果覺得對你有幫助，可以點一下關注，持續分享設計。
點個在看唄👇