編輯導(dǎo)語(yǔ)：隨著互聯(lián)網(wǎng)的不斷發(fā)展，政務(wù)方面的業(yè)務(wù)也在不斷的朝著互聯(lián)網(wǎng)方向靠近，比如政務(wù)系統(tǒng)的頁(yè)面設(shè)計(jì)，需要有很多表格以及圖形化表示，并且設(shè)計(jì)需要嚴(yán)謹(jǐn)；本文作者分享了關(guān)于政務(wù)可視化設(shè)計(jì)經(jīng)驗(yàn)的圖標(biāo)習(xí)慣，我們一起來(lái)了解一下。

頁(yè)面視覺(jué)只是表現(xiàn)層的組成之一。

作為政務(wù)可視化的設(shè)計(jì)師，需要站在用戶的角度去面向業(yè)務(wù)理解數(shù)據(jù)。數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息，因此合理的表述才是我們的核心；我們聽過(guò)無(wú)數(shù)的道理，但真正意義上面向業(yè)務(wù)理解數(shù)據(jù)是很多設(shè)計(jì)師都邁不過(guò)去的坎，這就是C端設(shè)計(jì)師進(jìn)入B端市場(chǎng)的現(xiàn)象。

通過(guò)復(fù)盤設(shè)計(jì)師參與過(guò)的項(xiàng)目時(shí)，發(fā)現(xiàn)仔細(xì)研究圖表的選擇和組成元素的行為，可以有效提升設(shè)計(jì)師對(duì)于業(yè)務(wù)和數(shù)據(jù)的滲透。和客戶敲定指標(biāo)內(nèi)容，其實(shí)也就是鉆研業(yè)務(wù)的過(guò)程。

凡事有個(gè)過(guò)程，敲定指標(biāo)內(nèi)容往往伴隨的都是陣痛。時(shí)間久了就能總結(jié)自己的方法論和技巧，面對(duì)客戶的時(shí)候也不會(huì)生澀，與君同勉。

本章主要講一下有關(guān)制作圖表的一些習(xí)慣和偏好，希望鉆研業(yè)務(wù)的過(guò)程中這些內(nèi)容能有所幫助。

以下內(nèi)容收集了Ant對(duì)于數(shù)據(jù)的處理和互聯(lián)網(wǎng)上成功的案例。自己看的時(shí)候感覺(jué)比較凌亂，所以重新梳理總結(jié)了一遍，加上了自己平時(shí)工作中的理解，和大家分享；特別建議剛剛起步的同學(xué)去看下G2Plot的系統(tǒng)性介紹，有助于對(duì)于基礎(chǔ)知識(shí)的了解。

一、圖表布局

可視化的大屏主要是讓使用的人快速、準(zhǔn)確、清晰地理解數(shù)據(jù)的意義，即而進(jìn)行分析趨勢(shì)、驅(qū)動(dòng)決策。

政務(wù)可視化的大屏傾向觀賞展示型，針對(duì)的對(duì)象也是偏向決策者的，重點(diǎn)是描述型的指標(biāo)結(jié)果頁(yè)面；因此，確定核心指標(biāo)間的聯(lián)系和優(yōu)先級(jí)，合理并有層級(jí)的進(jìn)行圖表布局，把結(jié)論和最重要的指標(biāo)放在醒目的位置。

我們之前說(shuō)過(guò)獲取信息點(diǎn)取決于用戶需求，而傳播信息點(diǎn)又受傳播媒介影響，圖表就是這個(gè)媒介之一。

雖然我們傾向觀賞展示型，決定使用數(shù)據(jù)概覽。政務(wù)的數(shù)據(jù)有許多方面，當(dāng)業(yè)務(wù)不斷下鉆時(shí)也會(huì)經(jīng)常出現(xiàn)需要數(shù)據(jù)分析，那么如何合理并且有層級(jí)的進(jìn)行圖表布局？

我們總結(jié)了一些經(jīng)驗(yàn)：① 概述第一，突出重點(diǎn)，表達(dá)準(zhǔn)確；②先具體再趨勢(shì)，信息粒度從大至小。

• 第一梯隊(duì)：大指標(biāo)區(qū)域；
• 第二梯隊(duì)：趨勢(shì)圖（折線圖）+排行類圖表（條形圖）；
• 第三梯隊(duì)：細(xì)分類型圖表（這個(gè)梯隊(duì)如果數(shù)據(jù)支持，建議從大到小，一目了然）；
• 第四梯隊(duì)：表格+大量文本；

由于匯報(bào)的特殊性，又要講成果又要細(xì)分下去講過(guò)程做新意。可能這邊講的有點(diǎn)玄，我打算這么解釋——你細(xì)想你們的項(xiàng)目是怎么接到，你們的客戶過(guò)往都是拿PPT匯報(bào)的啊！細(xì)想怎么接到項(xiàng)目就是在鉆研客戶的需求，客戶為啥想要過(guò)程，是因?yàn)橐硶约旱某晒?，有理有?jù)。你的可視化大屏就是客戶不滿意以前的ppt，想要再往上走一步，但是也要保留以前ppt匯報(bào)的習(xí)慣。

PS：同一信息面中的圖表數(shù)量5-9（7±2）個(gè)，避免用戶在使用過(guò)程中的記憶出錯(cuò)。

這四個(gè)梯隊(duì)如此安排，其實(shí)是觀察客戶在使用大屏的習(xí)慣而得。層層遞進(jìn)過(guò)程中，第一梯隊(duì)講重點(diǎn)，第二梯隊(duì)一眼看出趨勢(shì)和排名。等到需要展開重點(diǎn)了，再用第三第四梯隊(duì)詮釋，往往這步就是看看而已，優(yōu)先級(jí)最高的還是前面的重點(diǎn)、趨勢(shì)、排名。

沒(méi)人能在短時(shí)間內(nèi)記住那么多詮釋的資料，最有印象的還是前面的內(nèi)容。經(jīng)過(guò)我在現(xiàn)場(chǎng)維穩(wěn)的觀察，客戶其實(shí)使用大屏是介于Infographic還是Visualization之間的。

知道圖表的布局原則了，接下來(lái)告訴你怎么挑選對(duì)應(yīng)的圖表。下面是一張多篇文章都引用過(guò)的，來(lái)自設(shè)計(jì)師Abela對(duì)圖表的各種特征進(jìn)行了大致的概括總結(jié)，這邊借花獻(xiàn)佛，留個(gè)印象。

上述圖表選擇器還是比較專業(yè)的，我們最經(jīng)常使用的還是六件套— 柱狀圖、條形圖、折線圖、餅圖、散點(diǎn)圖、地圖。經(jīng)常翻閱的還是Echart和AntV上的具體圖表，因?yàn)橐呀?jīng)實(shí)現(xiàn)了，所以靠譜且生動(dòng)。

二、標(biāo)題與注釋

講這個(gè)前面我們先了解一下圖表完整的樣子是怎樣的：

一個(gè)完整的圖表是由標(biāo)題、副標(biāo)題、注釋、圖例、X軸標(biāo)題（單位）、X軸標(biāo)簽、X軸刻度線、Y軸標(biāo)題（單位）、Y軸標(biāo)簽、Y軸刻度線、網(wǎng)格線、提示信息等構(gòu)成的。

在平常使用的過(guò)程中，會(huì)根據(jù)場(chǎng)景去修飾刪減一些內(nèi)容。我在此列出來(lái)的原因是希望各位在使用圖表的時(shí)候能把這12個(gè)組成元素在大腦中輪一遍，確保修飾刪減的時(shí)候是為更好的展示信息去處理，而不是因?yàn)檫z忘。

標(biāo)題為了言簡(jiǎn)意賅的對(duì)圖表主題進(jìn)行闡述。注釋則是表明數(shù)據(jù)來(lái)源，給數(shù)據(jù)背書用的。均是用來(lái)更直觀的了解圖表主題和內(nèi)容來(lái)源。那么舉兩個(gè)例子來(lái)解釋這塊內(nèi)容是如何進(jìn)行修飾刪減的。

1. 標(biāo)題中文案修飾刪減的案例

通常圖表的標(biāo)題是根據(jù)圖表需要表達(dá)的內(nèi)容決定，大多數(shù)同學(xué)可能認(rèn)為命名沒(méi)有太多問(wèn)題。

根據(jù)概述第一、突出重點(diǎn)、表達(dá)準(zhǔn)確的原則，我們建議將概括的標(biāo)題中加入結(jié)論性的信息點(diǎn)；這樣讓閱讀者在最初接觸信息的時(shí)候就能通曉圖表說(shuō)明了什么，不過(guò)前提是這個(gè)圖表的結(jié)論是單一且唯一的。

2. 標(biāo)題區(qū)域強(qiáng)化重點(diǎn)信息的案例

我們前面說(shuō)過(guò)第一梯隊(duì)是大指標(biāo)區(qū)域，第二梯隊(duì)才是趨勢(shì)圖。如下的圖表在表達(dá)上只能一眼看出趨勢(shì)，并不能直接有效的傳遞信息。

在對(duì)數(shù)據(jù)進(jìn)行高度概括時(shí)，展示指示卡+數(shù)值，比圖表更直接更有效。提煉出圖表中的有效信息，將其層級(jí)放大，重點(diǎn)突出這些信息點(diǎn)。

三、坐標(biāo)軸

軸呢 ，是用來(lái)定義坐標(biāo)系中數(shù)據(jù)在方向和值的映射關(guān)系的。一般存在的就是二維笛卡爾坐標(biāo)系或者極坐標(biāo)軸，前面我們講過(guò)主要是軸線、軸刻度線、軸標(biāo)簽、軸標(biāo)題（單位）以及網(wǎng)格線。

政務(wù)可視化中，這塊容易弱化，主要弱化方向Y軸的功能。因?yàn)樾畔⒈惶釤捔耍院芏鄷r(shí)候Y軸對(duì)應(yīng)的映射功能就弱化了；比如軸標(biāo)題很多情況下是會(huì)被省略的，軸標(biāo)簽數(shù)據(jù)的意義能在提煉信息里找到。

軸呢，根據(jù)存在的數(shù)據(jù)，主要分為分類軸，時(shí)間軸，連續(xù)軸。刻度線的使用就是加強(qiáng)映射關(guān)系，快速的對(duì)應(yīng)到數(shù)據(jù)點(diǎn)。分類軸較多出現(xiàn)在柱狀、條形中，對(duì)于映射有天然的對(duì)應(yīng)關(guān)系，故在分類軸習(xí)慣隱藏軸上的刻度線。

1. 軸上標(biāo)簽內(nèi)容過(guò)多的優(yōu)化案例

在政務(wù)可視化的設(shè)計(jì)中，總會(huì)碰到軸標(biāo)簽內(nèi)容過(guò)長(zhǎng)的情況，而且你還不得不考慮尺寸的問(wèn)題。

我們的建議的是不到萬(wàn)不得已千萬(wàn)不要略寫，哪怕真的要略寫，一定要在略寫的指標(biāo)名稱后面跟上一個(gè)小問(wèn)號(hào)，鼠標(biāo)hover時(shí)能立即顯示全稱。政務(wù)里的數(shù)據(jù)講究一數(shù)一源，精確對(duì)應(yīng)責(zé)任單位責(zé)任人。這些都是吃過(guò)虧的小細(xì)節(jié)，請(qǐng)慎重。

其實(shí)面對(duì)優(yōu)化軸標(biāo)簽內(nèi)容過(guò)多的問(wèn)題，我們有以下兩類常用辦法。

1）推薦連續(xù)軸、時(shí)間軸保留頭尾進(jìn)行抽樣；不推薦軸標(biāo)簽旋轉(zhuǎn)來(lái)縮短顯示寬度。

2）推薦分類軸轉(zhuǎn)變?yōu)闂l形圖，單行或者兩行以保留全部軸標(biāo)簽內(nèi)容；不推薦軸標(biāo)簽旋轉(zhuǎn)來(lái)縮短顯示寬度。

這兩類都提及了不希望軸標(biāo)簽旋轉(zhuǎn)來(lái)解決顯示寬度不夠的情況，其實(shí)不只是軸標(biāo)簽旋轉(zhuǎn)，軸標(biāo)簽的上下排列、換行排列都不推薦。

盡管有些響應(yīng)式方案有這類的推薦，我打算這么解釋這個(gè)問(wèn)題。在政務(wù)類設(shè)計(jì)中，我們初期做適配方案的時(shí)候，充分調(diào)研了用戶可能的使用場(chǎng)景和用途。用戶的樣本容量小并且定制化程度高，需要適配的尺寸也是定的下來(lái)的。

設(shè)計(jì)中向視覺(jué)效果緯度有過(guò)多的傾斜，優(yōu)先保障視覺(jué)體驗(yàn)，因此就不推薦響應(yīng)度更好、適配性更佳的方案。

當(dāng)然做數(shù)據(jù)型后臺(tái)解決辦法的時(shí)候，我們還是將傾斜方案納入我們的選擇。畢竟兩種使用場(chǎng)景和設(shè)計(jì)目標(biāo)是不一樣的，希望看到這邊的同學(xué)不要混淆這兩類的概念。

2. 圖表顯示標(biāo)簽優(yōu)化映射的案例

在繪制的圖表的時(shí)候，我們傾向?qū)?biāo)簽直接打在圖形上。這樣做會(huì)有個(gè)后果，當(dāng)數(shù)據(jù)特別多并且密的時(shí)候會(huì)造成全部標(biāo)簽擠在一起的情況；因此在設(shè)計(jì)的時(shí)候需要對(duì)這塊圖表表達(dá)的信息有著充足的了解，明白其中可能會(huì)碰到的問(wèn)題。

之前也說(shuō)過(guò)了，政務(wù)類的定制化程度更高，我們傾向優(yōu)先保障視覺(jué)體驗(yàn)。那么為了保障用戶能夠快速對(duì)應(yīng)這個(gè)指標(biāo)的映射關(guān)系，就需要鉆研面對(duì)的業(yè)務(wù)。

需要提一句的是，標(biāo)簽的文本和圖形經(jīng)常需要交疊展示，所以可讀性要足夠良好，故在使用標(biāo)簽的顏色請(qǐng)謹(jǐn)慎。

3. 標(biāo)簽有關(guān)時(shí)間概念注明的案例

翻資料的時(shí)候，發(fā)現(xiàn)AntV對(duì)于相對(duì)時(shí)間有著一些定義，覺(jué)得有意思就一直沿用下來(lái)了。相對(duì)時(shí)間的精確度對(duì)于用戶并不十分重要，重要的是信息的即時(shí)性。相對(duì)時(shí)間一般用于消息、通知類功能，用戶往往更關(guān)注于書面形式的時(shí)間單位，而不必去往前推算出發(fā)布的具體時(shí)間點(diǎn)。

具體用法如下：

4. 標(biāo)簽對(duì)于明確缺省狀態(tài)的案例

之前講過(guò)政務(wù)里的數(shù)據(jù)講究一數(shù)一源，精確對(duì)應(yīng)責(zé)任單位責(zé)任人。以前有個(gè)老朋友講的一句話一直讓我記到現(xiàn)在，那就是“沒(méi)有數(shù)據(jù)也是一種數(shù)據(jù)”，因此在缺省狀態(tài)的標(biāo)識(shí)中要做到清晰明確。

細(xì)想也是，如果沒(méi)有客戶的主觀干預(yù)，純粹在客觀上談這個(gè)問(wèn)題 ，缺省狀態(tài)下也是一種價(jià)值導(dǎo)向。如今政務(wù)中講究打破信息孤島的概念，打通各個(gè)部委的渠道，缺少數(shù)據(jù)確實(shí)是一種有問(wèn)題的情況。

• 推薦無(wú)數(shù)據(jù)的標(biāo)識(shí)應(yīng)該用“——”，不推薦使用“**”。
• 推薦圖表缺省是直接用中性的符號(hào)配合文字描述為“暫無(wú)”，不推薦描述為“故障”。

5. 圖表刻度線顯示的主次優(yōu)化案例

圖表中的刻度線就是上面標(biāo)出的網(wǎng)格線，由于刻度線是從軸線衍生出來(lái)的，所以將兩個(gè)一起記憶。根據(jù)主次原則，刻度線是用來(lái)輔助圖表優(yōu)化映射關(guān)系的，因此圖表中的信息才是重點(diǎn)。那么我們習(xí)慣軸線為主，刻度線為輔，并且視覺(jué)層級(jí)上不能搶圖表中的信息。

6. 軸上選擇合適上下限的優(yōu)化案例

之前說(shuō)過(guò)獲取信息點(diǎn)取決于用戶需求，而傳播信息點(diǎn)又受傳播媒介影響，因此表達(dá)目的決定了上下限選?。槐热鐢?shù)據(jù)本身沒(méi)有那么起伏變化，處理上下限的顆粒度，把刻度拉長(zhǎng)，一樣能顯得“長(zhǎng)勢(shì)感人”。

從上面就能明白看圖表的時(shí)候千萬(wàn)不要被表面給欺騙，設(shè)計(jì)師的小心思還是要注意的。需要注意上下限有沒(méi)有被處理過(guò)，特別是沒(méi)有Y軸的直接在圖標(biāo)上打標(biāo)簽的（dog臉）。

存在即合理，對(duì)于處理上下限不做過(guò)多評(píng)價(jià)。只是介紹一個(gè)我們常用優(yōu)化顯示效果的辦法：

折線圖或者柱狀圖的Y軸使用動(dòng)態(tài)計(jì)算，這個(gè)很多輪子都實(shí)現(xiàn)了，例如Echart或者AntV。舉個(gè)明顯的例子就是，對(duì)于Y軸圖表中的最大值進(jìn)行動(dòng)態(tài)計(jì)算，比如一排數(shù)字中最大的為1790，那么軸標(biāo)簽最高位為1800；一排數(shù)字中最大的是1810，那么軸標(biāo)簽最高位為2100。1800還是2100是根據(jù)軸上的分段數(shù)決定的。

我記得我曾經(jīng)在一篇文章中看到有些把折線的高度控制在圖表高度的2/3，或者將柱狀的高度控制在圖表高度的85%左右。我并不是很明確當(dāng)時(shí)設(shè)計(jì)師的立意在哪，但是得承認(rèn)這樣子確認(rèn)會(huì)顯的好看，做案例可以做真實(shí)數(shù)據(jù)不行。

思前想后我認(rèn)為這種方式太刻意，并且規(guī)則定制的比較細(xì)，需要每種圖表按照這樣的目標(biāo)制定規(guī)則，不僅僅是優(yōu)化幾張圖表就夠的。

（PS：實(shí)際數(shù)據(jù)有的時(shí)候會(huì)出現(xiàn)極限情況，比如有些特別大有些特別小，這種情況也適用，請(qǐng)不要處理數(shù)據(jù)，因?yàn)檫@樣的數(shù)據(jù)就是實(shí)際情況。）

四、圖例與提示信息

圖例解釋圖表區(qū)域所有視覺(jué)元素的含義，用來(lái)映射圖形的尺寸、顏色、數(shù)值等，是輔助用戶進(jìn)行理解的，由映射圖形形狀和文本組成。提示信息一般是tap或者h(yuǎn)over的時(shí)候，圖表以交互的方式吐出該位置的數(shù)據(jù)，幫助用戶更深入的了解數(shù)據(jù)。

老實(shí)說(shuō)，圖例會(huì)用的比較多，畢竟需要標(biāo)識(shí)信息。提示信息在可視化大屏上就比較用的少，當(dāng)然我不是說(shuō)不重要，只是由于人為介入比較多，表達(dá)數(shù)據(jù)的時(shí)候?qū)?shù)據(jù)進(jìn)行了初篩。能展示出來(lái)的一般也伴隨著標(biāo)簽，所以提示信息就顯得沒(méi)那么強(qiáng)需要，可能當(dāng)層級(jí)做的比較深，數(shù)據(jù)量大的時(shí)候會(huì)使用來(lái)幫助用戶了解數(shù)據(jù)。

當(dāng)然提示信息作為一種交互方式存在，我們借鑒了這種方式，比如在核心區(qū)中用來(lái)給結(jié)果數(shù)據(jù)提供詳細(xì)的背書過(guò)程，或者長(zhǎng)又長(zhǎng)的數(shù)據(jù)簡(jiǎn)寫后跟上一個(gè)小問(wèn)號(hào)。

著重介紹下圖例，根據(jù)數(shù)據(jù)類型不同，分為連續(xù)型圖例和分類型圖例；根據(jù)狀態(tài)不同，圖例可以被設(shè)置為靜態(tài)或可交互態(tài)。其中帶交互態(tài)：分類圖例我們使用的最多，能夠有效的區(qū)分信息。

1. 順從用戶視覺(jué)本能導(dǎo)向的案例

這條是我翻Ant的時(shí)候的一個(gè)驚喜，從原來(lái)的技術(shù)支持的12個(gè)位置，最后克制收斂為2種方式。不僅遵從的用戶的視覺(jué)導(dǎo)向，并且對(duì)于設(shè)計(jì)者也更好記憶。整體顯得比較“巧”，因此一直沿用下來(lái)了。

2. 順從用戶閱讀習(xí)慣的案例

對(duì)于人來(lái)說(shuō)，四舍五入后的整數(shù)比零散的數(shù)字更加容易接受；因此我們傾向于一些取整的數(shù)字，同樣的，這不僅僅適用于圖例中的數(shù)字，同樣適用于坐標(biāo)軸上下限的數(shù)字。

圖例中也有豎直圖例和水平圖例，區(qū)分這兩種的一般是：帶有連續(xù)性的傾向于使用水平圖例、帶有分類屬性的傾向于使用豎直圖例。

五、圖形

人類從圖形中獲取信息的效率遠(yuǎn)遠(yuǎn)比文本，可以說(shuō)如今人類早已進(jìn)入了讀圖時(shí)代。圖形是統(tǒng)計(jì)圖表的視覺(jué)通道在形狀上映射的視覺(jué)展現(xiàn)，是圖表的主體部分。

按照組件原子化的思路來(lái)定義現(xiàn)在千奇百怪的圖表，大致可以分為六種基礎(chǔ)樣式：折線，面積，散點(diǎn)，氣泡，餅/環(huán)，柱形，條形。

其實(shí)我們?cè)诠ぷ髦幸恢庇袀€(gè)想法，較早之前利用原子理論結(jié)合自身業(yè)務(wù)并借助AntD的開源力量實(shí)現(xiàn)了公司內(nèi)部的后臺(tái)組件庫(kù)。大屏可視化這塊確實(shí)因?yàn)榻M件比較多樣，多樣在每個(gè)組件有顏色、體飾、基礎(chǔ)樣式等多個(gè)緯度的變化，目前暫時(shí)做到內(nèi)部源文件整理了多套組件庫(kù)。但是實(shí)際研發(fā)中，成本還是比較高，高在組件重復(fù)使用，并且做出來(lái)的源文件比較大。

與DataV不同的是我們的項(xiàng)目均是高定制化，我目前想的是每個(gè)項(xiàng)目單獨(dú)成立自己的組件庫(kù)，組件庫(kù)中自我維護(hù)自我升級(jí)，視覺(jué)稿定義整體色調(diào)、響應(yīng)方案、組件容器塊等。通過(guò)分鏡、腳本來(lái)定義核心區(qū)交互方式，前期定義規(guī)則，減少重復(fù)制作成本，這套方案已經(jīng)慢慢推動(dòng)，看到這邊的同學(xué)有好的想法也可以聯(lián)系我。

1. 強(qiáng)化圖表信息表達(dá)的案例

強(qiáng)化圖表信息表達(dá)的過(guò)程就是體現(xiàn)主次順序，處理層次關(guān)系，簡(jiǎn)化用戶獲取信息的成本。主要通過(guò)大小、明暗、標(biāo)識(shí)三種方式來(lái)處理這部分需求。但是同時(shí)得注意“數(shù)據(jù)油墨比”的處理，在合適的場(chǎng)合使用合適的技巧。

在政務(wù)可視化中，人為干預(yù)強(qiáng)化圖表信息表達(dá)，不做假的情況下，給人最直接的傳達(dá)。

1）大小對(duì)比

通過(guò)大小對(duì)比是最直接的一種方式，之前我們也說(shuō)過(guò)如果數(shù)據(jù)支持，一般都會(huì)處理成這樣，便于用戶理解信息。

比如柱狀圖和條形圖以分類軸為主、餅狀圖從大至小等這些場(chǎng)景。

2）明暗對(duì)比

通過(guò)明暗對(duì)比可以有效的區(qū)分信息，在視覺(jué)層級(jí)上也是明顯的處理了視覺(jué)噪音，便于用戶區(qū)分信息。

3）標(biāo)識(shí)對(duì)比

通過(guò)標(biāo)識(shí)對(duì)比，人為去干預(yù)信息的表達(dá)，多用于一前一后的標(biāo)識(shí)，便于用戶識(shí)別信息。

2. 折線圖圖表習(xí)慣的相關(guān)案例

折線圖用于表示連續(xù)時(shí)間跨度內(nèi)的數(shù)據(jù)，它通常用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化。相對(duì)于獨(dú)立的數(shù)據(jù)點(diǎn)，折線圖關(guān)注的是全局趨勢(shì)，反映事物隨時(shí)間或有序類別而變化，是上升了？還是下降了？針對(duì)數(shù)據(jù)做傳達(dá)。

1）折線圖適合用于時(shí)序數(shù)據(jù)，使用合適的時(shí)間間隔，使鋸齒狀的線條平滑

折線圖適合在一個(gè)連續(xù)的時(shí)間上顯示數(shù)據(jù)，而不是在不同類型的分類上。使用合適的時(shí)間間隔只是讓折線更加容易觀賞，但是如果有強(qiáng)需求說(shuō)是一定要在某個(gè)范圍，這條略過(guò)。注意平滑并不是圓滑的曲線，并且注意慎用曲線，先不說(shuō)樣本量的問(wèn)題，就單單說(shuō)曲線在一定程度上削減折線的變化程度。

2）善用數(shù)據(jù)點(diǎn)標(biāo)記、標(biāo)記、輔助區(qū)域，注意數(shù)據(jù)油墨比，重點(diǎn)是反應(yīng)變化

全部標(biāo)清數(shù)據(jù)點(diǎn)在大多數(shù)情況下標(biāo)記出來(lái)的意義不大，從視覺(jué)上來(lái)看會(huì)顯得非?，嵥椤?biāo)記、輔助區(qū)域也是，一般都是伴隨交互觸發(fā)出來(lái)的，大規(guī)模的顯示會(huì)擠占數(shù)據(jù)表達(dá)的層級(jí)，數(shù)據(jù)的變化會(huì)被遮蓋。

3）添加“比較”的數(shù)據(jù)，加強(qiáng)線與線直接的對(duì)比，提高重要性層級(jí)

折線表達(dá)的是趨勢(shì)，單獨(dú)的一條線是比較單薄的，通過(guò)加入比較的信息，可以加強(qiáng)這塊內(nèi)容的表達(dá)。但是同時(shí)得注意元素與元素間的層級(jí)關(guān)系，避免信息繁雜。

3. 面積圖圖表習(xí)慣的相關(guān)案例

面積圖又叫區(qū)域圖，和折線圖有相似的地方。但是與折線有區(qū)分的是多了一個(gè)面積概念，顏色的填充可以更好的突出趨勢(shì)信息。面積圖用于強(qiáng)調(diào)數(shù)量隨時(shí)間而變化的程度，也可用于引起人們對(duì)總值趨勢(shì)的注意。他們最常用于表現(xiàn)趨勢(shì)和關(guān)系，而不是傳達(dá)特定的值。

與折線相比，面積圖多了面積的元素會(huì)更好表達(dá)趨勢(shì)，而折線則是強(qiáng)調(diào)數(shù)據(jù)對(duì)于的值以及數(shù)據(jù)之間的變化。

1）面積顏色的樣式對(duì)應(yīng)不同的場(chǎng)景和表達(dá)，同一系統(tǒng)需要準(zhǔn)確的使用

面積圖主要是表達(dá)趨勢(shì)和關(guān)系，在這個(gè)基礎(chǔ)上有實(shí)底、透明、漸變?nèi)N樣式。實(shí)底面積圖為基礎(chǔ)樣式，旨在表達(dá)趨勢(shì)，透明面積圖旨在表達(dá)趨勢(shì)的對(duì)比，漸變旨在表達(dá)累計(jì)。

2）當(dāng)面積圖中趨勢(shì)太多或者太少，請(qǐng)使用其他圖表去表達(dá)數(shù)據(jù)

當(dāng)面積圖的x軸過(guò)于少量，不如使用堆疊柱狀圖更容易表達(dá)數(shù)據(jù)間的關(guān)系；當(dāng)面積圖的趨勢(shì)種類過(guò)多（大于3），不如使用折線圖更適合表達(dá)數(shù)據(jù)間的關(guān)系。

4. 柱條圖圖表習(xí)慣的相關(guān)案例

柱狀圖用于描述分類數(shù)據(jù)之間的對(duì)比，條形圖即是橫向柱狀圖，相比基礎(chǔ)柱狀圖，條形圖的分類文本可以橫向排布，因此條形圖適合用于分類較多的場(chǎng)景。

政務(wù)可視化中我們依循7±2規(guī)則，柱狀圖總數(shù)不超過(guò)5類，條狀圖總數(shù)不超過(guò)7類，餅狀圖不超過(guò)9類。種類過(guò)多情況使用隱藏手法。

1）使用合適的寬度去適配柱條的寬度，太窄或太寬只有特定的表達(dá)目的中會(huì)使用。

習(xí)慣使用柱子寬度在整體寬度的60%，基礎(chǔ)示意如下：柱子寬度3N、柱子間的寬度2N、柱子離邊界寬度N。

當(dāng)然更寬的柱寬以及窄間距會(huì)給人更有力量靠譜的感覺(jué)，更窄的柱寬以及寬間距會(huì)給人細(xì)膩高端的感覺(jué)，遵從排版原則。

2）分組柱狀圖/條狀圖需要強(qiáng)調(diào)組的概念，故組和組之間的間距要大于元素與元素之間的間距。

3）分組柱狀圖的數(shù)值是要差異不大的，如果數(shù)值差很大或者不在同一個(gè)度量衡中，建議使用雙軸圖。

4）堆疊條狀圖的數(shù)值建議在圖形之間，居中對(duì)齊。居左會(huì)產(chǎn)生誤解。

5. 餅狀圖圖表習(xí)慣的相關(guān)案例

餅圖主要是用來(lái)表達(dá)不同分類的占比情況，一個(gè)扇形區(qū)域就是一個(gè)分類。環(huán)圖與餅圖類似，一個(gè)弧形切片就是一個(gè)類型，都是根據(jù)面積的大小來(lái)判斷占比情況。

餅圖和環(huán)圖都是受爭(zhēng)議的圖表，從視覺(jué)上去比對(duì)面積的大小情況是很難確定了，因此非常依靠標(biāo)簽來(lái)輔助。

相對(duì)于餅圖更加推薦使用環(huán)圖，弧長(zhǎng)比面積和角度更有效，且環(huán)圖中心留白區(qū)域可以做文章。

1）餅圖和環(huán)圖的分類數(shù)不超過(guò)9類

2）餅圖和環(huán)圖的多個(gè)極小值可以合并展示

3）餅圖和環(huán)圖的起始依循表盤，從12點(diǎn)開始并順時(shí)針?lè)较蚺帕?/strong>