整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
于平行網(wǎng)頁尋源，前面我們對其做了一些最基本的介紹，包括什么是平行網(wǎng)頁、怎么去尋找平行網(wǎng)頁。
我們知道，平行網(wǎng)頁找到了，任務(wù)已經(jīng)完成一半了，剩下的任務(wù)你只需要把分站間的內(nèi)容互譯頁面找出來提交即可，看似簡單，其實這一步難度還是比較大的，平臺要求3對互譯頁面，并且只要有一對不滿足互譯頁面的要求，平臺也不會采納，我們前期做的工作都將功虧一簣。
也許你會說可以使用語言翻譯工具，看下頁面是否是互譯的，在我看來，這也有些不太現(xiàn)實，做過平行網(wǎng)頁尋源任務(wù)的同學(xué)知道，平行網(wǎng)頁要求的語言有很多，比如西班牙語、俄語、越南語、葡萄牙語、法語、土耳其等語言，這么多語言如何去翻譯，并且任務(wù)的數(shù)量是一定的，每個任務(wù)也有一定時間的限制，很顯然，使用翻譯工具不是一個好辦法。那我們是否有其他辦法呢？
今天，我們就聊這個話題。找到平行網(wǎng)頁后，如何快速找到分站間的內(nèi)容互譯頁面？
其實，瀏覽器在打開網(wǎng)頁后，我們是有辦法查看到此網(wǎng)頁的源代碼的，例如：Apple 的主站https://www.apple.com/, 使用 Google Chrome 瀏覽器打開，在頁面上點擊右鍵，會彈出一個對話框，可以看到“查看網(wǎng)頁源代碼”一項。
點擊會重新彈出一個頁面，這個頁面就是 https://www.apple.com/ 主站的源代碼了。
仔細(xì)看下這個網(wǎng)頁的源代碼，不難發(fā)現(xiàn)，這些信息非常有助于我們?nèi)ゴ_定網(wǎng)頁的內(nèi)容是否是互譯的。現(xiàn)在，以 Apple 的中國主站與西班牙主站為例，來介紹如何通過網(wǎng)頁源碼來初步定位頁面內(nèi)容是否是互譯的。
Apple 中國分站的源碼片段：
Apple 西班牙分站的源碼片段：
對比這兩個分站，紅色方框的內(nèi)容，我們會注意到有一個關(guān)鍵字 href, HTML 語法中較常見，其屬性值可以是任何有效文檔的相對或絕對的 URL，換句話說href 后面的值指向的是另一個站點，分別點擊 href 后面的值 ”cn/mac”, ” es/mac”, 我們會看到重新彈出兩個網(wǎng)頁。
大致看下頁面，盡管我們不懂西班牙語，但是從圖片以及顯示的內(nèi)容看，這就是一對標(biāo)準(zhǔn)的互譯頁面。
同時，從 href 后面的值”cn/mac”, ” es/mac”, 也能夠發(fā)現(xiàn)，cn, es 后面緊跟的 “mac”, 這個鏈接下面的內(nèi)容大概率是跟 mac 內(nèi)容強相關(guān)， 也能夠初步判斷這兩個鏈接下面的內(nèi)容是互譯的。
所以，從上面的描述看， 快速找到分站間的內(nèi)容互譯頁面可以簡單概括為如下幾個步驟：
（1） 確定網(wǎng)頁主站對應(yīng)的分站；
（2） 使用 Google Chrome 瀏覽器打開分站，查看分站的源代碼；
（3） 搜索關(guān)鍵字 href, 找到其后面的屬性值，并點擊打開其對應(yīng)的鏈接；
（4） 對打開的鏈接網(wǎng)頁內(nèi)容進行查看，確定是否是互譯頁面；
作者簡介：一個專注于記錄互聯(lián)網(wǎng)兼職 任務(wù)的學(xué)生，公眾號《做點事吧》，歡迎關(guān)注。
其實寫本文的初衷只是想分享一個css新特性【scroll-timeline】,但是我想要體現(xiàn)出它的強大效果，此時正好想到了之前看到過釘釘?shù)氖醉搫赢?，就是滾動頁面然后進行一系列動畫的，所以我決定實現(xiàn)一下這個效果。（見上方動圖，只是實現(xiàn)了大體效果，細(xì)節(jié)沒有優(yōu)化，各位看官多多擔(dān)待）
它是干什么用的呢？
一句話概括為：“用滾動區(qū)域的滾動動作驅(qū)動動畫的進度”。
可能有些同學(xué)還不太懂，我再稍加解釋。我們以往的animation都是以時間作為動畫的時間線的，比如我們需要設(shè)置動畫的總時長animation-duration為 n 秒，那么動畫在進行 n 秒后，就會處于 100% 的狀態(tài)。
而當(dāng)我們使用了scroll-timeline之后，以滾動動作驅(qū)動動畫的進度，那么就是我們在滾動區(qū)域滾到底時，動畫就會處于100%狀態(tài)，即滾動了百分之多少，動畫就會進行百分之多少。還不明白可以體驗下方的小demo
以前如果要實現(xiàn)這種效果，往往得監(jiān)聽 scroll 事件，用js動畫實現(xiàn)，總體來說非常復(fù)雜，但是有了這個新特性之后，為css的創(chuàng)造性又提升了一個臺階。
1?? 首先我們需要在滾動區(qū)域上定義一個滾動時間線，滾動時間線需要設(shè)置兩個值：
可選的滾動方向有：
2?? 然后在滾動區(qū)域內(nèi)需要執(zhí)行動畫的元素上，將動畫時間線設(shè)置為我們定義的滾動時間線的名稱。設(shè)置完成后，該元素的動畫進度就會變成通過滾動動作驅(qū)動。
經(jīng)過我十幾分鐘的分析，將這個復(fù)雜的特效切割成了三部分：
分析結(jié)束后，開始動工?。
首先創(chuàng)建一個寬高滿屏的div，為了方便后面描述，我們叫這個div為【滾動盒子】，并設(shè)置黑色背景。
然后添加一個子元素，設(shè)置高度大于100%，這樣父元素就能滾動了，不然無法驅(qū)動動畫執(zhí)行，這里我隨便設(shè)置了高度200%。
那么有動效的元素（我暫且叫它【動效盒子】）在滾動盒子中如何定位呢，總不能就在文檔流中吧，那豈不是滾動區(qū)域滾動的時候，整個動效盒子也會被來回滾動，甚至滾出可視區(qū)域。這樣顯然是不行的，并且設(shè)置 absolute 絕對定位也是不行的，同樣會跟隨滾動。
得出結(jié)論： 為了讓動效盒子不在滾動盒子內(nèi)滾動，只能考慮 fixed 固定定位和 sticky 粘性定位，兩者都可以實現(xiàn)，但是 fixed 定位不太靈活，一旦修改滾動盒子的位置，就得跟著調(diào)整動效盒子的位置。所以最終我給動效盒子設(shè)置寬高100%，并粘性定位于滾動盒子頂部。
布局結(jié)構(gòu)大致如下：
: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>
//這里面是實現(xiàn)動效的元素
</main>
//撐開父元素高度，讓父元素可以滾動
<div id="stretcher"></div>
</div>因為動效是 3D動效，所以我們先在動效盒子設(shè)置下3D效果和視距：
main{
transform-style: preserve-3d;
perspective: 500px;
}然后就是設(shè)置lodo的動畫了，運動軌跡很簡單，translate3d向上向屏幕外移動就行了，因為logo在消失之后還會繼續(xù)面板動效，所以我假定logo動效大概占總動效時長 2/3。將動畫綁定了滾動時間線后，只需要觀察在logo從頂部消失時，滾動條大概滾動了 2/3 即可，慢慢調(diào)整參數(shù)。
?需要注意的是：因為logo是在快移動出屏幕時才逐漸變透明，所以需要單獨設(shè)置個透明度變化的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;
}
}色塊動效和logo動效差不多，也是 translate3d 的變化。因為他們作為一個整體在運動，新建個色塊盒子，所有色塊都扔里面設(shè)置絕對定位，通過 translateZ 呈現(xiàn)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>面板動效是最復(fù)雜的，整體呈現(xiàn)為從中心點擴散成列表模式。逆向思維一下，其實這個動畫的實質(zhì)是先設(shè)置成列表形式，然后在動畫 0% 時將所有元素移動縮小到中心點。
麻煩點來了，怎么確定每個元素移動的距離就能移動到面板中心點呢？我想了個辦法，我先在面板中心顯示了一個小點，如下：
然后在控制臺不斷設(shè)置元素的 translte 移動距離，直至和小點重合（先把元素scale成一個小點）。這樣就可以很輕松獲取到每個元素位移到中心點的距離。（ps：因為每行有7個元素，其實只需要調(diào)試獲取到第一行的前四個元素的tanslate距離就行，第一行后面的三個就是把前面三個點x改為負(fù)值，第二行則負(fù)復(fù)制第一行，把y全部改為負(fù)值）
可以看到，已經(jīng)成功實現(xiàn)了圖標(biāo)從中心點擴散，但似乎叮叮的圖標(biāo)像是一個一個出來的，所以還需要改進。 觀察叮叮的面板動效得知，圖標(biāo)是從最外側(cè)的兩列開始出現(xiàn)，然后再是里面的兩列，以此類推。
簡單，只需要設(shè)置動畫延遲就行。但是被綁定滾動時間線的動畫無法設(shè)置 animation-delay 動畫延遲，那只能在動畫內(nèi)容里下文章，1,7列是45%開始移動，2,6列是50%開始移動，3,5列55%開始移動，最中心第4列60%開始移動。
面板背景色顯示邏輯差不多，在動畫70%時再開始設(shè)置背景色。
emmmm，差不多了，就這樣吧～ 完結(jié)撒花
點擊碼上掘金右上角“查看詳情” 滾動鼠標(biāo)滾輪查看效果。只是實現(xiàn)了大體動效，沒有調(diào)整細(xì)節(jié)，多調(diào)調(diào)參數(shù)應(yīng)該可以做到和釘釘首頁99%相似度。
釘釘應(yīng)該是用js監(jiān)聽滾動實現(xiàn)的這個復(fù)雜效果，可以看到，當(dāng)我們使用css新特性 scroll-timeline 之后，這個動效完全就可以用純css實現(xiàn)了，簡單了很多
更新補充一下兼容性：目前這個css屬性還是項實驗性技術(shù)，真要應(yīng)用在生產(chǎn)環(huán)境可能還需要些時日，但是不得不說，css越來越強大了！我們要做一個驕傲的前端仔！
輯導(dǎo)語：數(shù)據(jù)可視化圖表種類如此之多，什么場景下應(yīng)該用什么圖表展示，是一個讓人頭禿的難題。本文作者總結(jié)各種圖標(biāo)的優(yōu)勢和類型。感興趣的小伙伴們，一起來看看吧！
“大屏”，這個詞最近幾年來被廣泛地提及，幾乎各行各業(yè)都希望通過“大屏”這種方式來將自己的產(chǎn)品或業(yè)務(wù)進行數(shù)字化升級。同時，也就吸引越來越多的設(shè)計師看好可視化大屏在未來的前景。
作為一種交互和視覺都相對炫酷的界面展示方式，不僅能夠?qū)⒍喾N場景同時展示在一個屏幕上，同時，也可以給觀者帶來強烈的視覺沖擊力，使其直觀地了解到想要關(guān)注的實時動態(tài)信息，或者通過大屏上的數(shù)據(jù)圖表來分析出當(dāng)前及未來的現(xiàn)狀、趨勢等。
首先我們先來了解一下，什么是“數(shù)據(jù)可視化”？
數(shù)據(jù)可視化就是將抽象概念進行形象表達，將抽象語言進行具象圖形可視的過程。簡單理解，就是將數(shù)據(jù)以視覺的形式來呈現(xiàn)，如圖表或者地圖，從而幫助人們了解這些數(shù)據(jù)本身以及背后的意義。
數(shù)據(jù)可視化一個基本的原則，就是將具有價值的數(shù)據(jù)和洞察，通過簡潔、準(zhǔn)確、突出洞察的圖表表現(xiàn)出來。
所以，將數(shù)據(jù)可視化不單單是簡單的圖表的羅列，更重要的是說明數(shù)據(jù)背后的意義（實際問題&解決方案）；然而很多時候我們只是展示了很多炫酷的圖表，但沒有解決任何實際的問題；或者具有高價值的數(shù)據(jù)信息，沒有使用合適的呈現(xiàn)方式，導(dǎo)致表達不清楚，輸在了這“臨門一腳”。
我們用一個簡單的關(guān)系圖來示意一下，一個可視化圖表是否體現(xiàn)出了它應(yīng)有的價值。
一個圖表既需要提供出可供參考的價值，也需要兼顧讀者理解信息的速度，如果只是提供了價值，但是理解起來比較耗時，那么它一定是低效的；若是清晰地展示數(shù)據(jù)信息，但是不能夠提供足夠的價值，那么也只是“空有外表，欠缺內(nèi)在”。
所以我們在設(shè)計一個圖表之前，就需要我們知道數(shù)據(jù)有哪些字段構(gòu)成、每個字段的數(shù)據(jù)類型、字段之間的依賴關(guān)系等。思考如何用簡潔的架構(gòu)完整的描述業(yè)務(wù)。
在這里舉個簡單的例子，比如鐵道行業(yè)——“什么時間？哪位員工？在哪個地點？執(zhí)行了什么作業(yè)？以及具體的作業(yè)內(nèi)容”
當(dāng)然，這樣的數(shù)據(jù)是靜態(tài)的。當(dāng)面對我們的客戶時，他們會更關(guān)心問題和答案。而問題通常不是一個單一的問題，而是一連串問題的組合，尋找問題的過程更像是“剝洋蔥”。
在業(yè)務(wù)分析的過程中，都是不同維度層次之間的鉆取和關(guān)聯(lián)分析，簡單的問題只有一個數(shù)據(jù)層次，復(fù)雜的問題則同時包含多個數(shù)據(jù)層次及其相互關(guān)系。分析數(shù)據(jù)的過程就是在問題對應(yīng)的數(shù)據(jù)層次上，完成聚合分析。站在不同的視角對于一組數(shù)據(jù)的關(guān)注點也會不同。
做為設(shè)計師，當(dāng)我們將一組數(shù)據(jù)進行數(shù)據(jù)可視化時，往往是已經(jīng)經(jīng)過處理過的數(shù)據(jù)，我們只需要對圖表進行優(yōu)化即可，而不用去關(guān)注原始的數(shù)據(jù)是如何處理的，在這種情況下設(shè)計師的任務(wù)就相對來說比較簡單了。
但是對于原始數(shù)據(jù)的處理和分析其實是非常復(fù)雜的，有機會和大家分享一下數(shù)據(jù)背后的故事。
盡管做為設(shè)計師只要將數(shù)據(jù)圖表進行優(yōu)美的設(shè)計，但大多數(shù)的設(shè)計師是不知道什么才是好的可視化圖表，這也是寫這篇文章解決大家這些問題的初衷。
在設(shè)計時，大多數(shù)的設(shè)計師都是根據(jù)自己的第一主觀感受或者結(jié)合自身經(jīng)驗的積累去判斷一個圖表的好壞。而不是根據(jù)科學(xué)的方法來去衡量一個圖表是否是好的圖表。在此給大家一個驗證數(shù)據(jù)可視化圖表設(shè)計的“黃金公式”。
我們到底該如何去評判一個圖表的好壞？不是通過主觀地、帶有經(jīng)驗性質(zhì)的感覺，而是要有科學(xué)地依據(jù)進行分析和論證，有相對應(yīng)的指標(biāo)去衡量。這樣才能避免我們走很多不必要的彎路。而這個科學(xué)的依據(jù)就是“GLAD原則”，是我們驗證一條數(shù)據(jù)可視化的“黃金公式”。
GLAD是由四個短語的開頭首字母構(gòu)成：Good Data and Insight、Less Noise、Accurate Expression、Distinct Mark。它們是黃金公式中四項重要組成部分。探索性數(shù)據(jù)分析注重內(nèi)涵，解釋性數(shù)據(jù)分析注重外表，一個好的圖表需要內(nèi)外兼修。GLAD原則，作為優(yōu)化圖表設(shè)計的理念，是兩者兼顧的?！?strong>G”在探索性數(shù)據(jù)分析過程中著重提升圖表的價值，“LAD”在解釋性數(shù)據(jù)分析中幫助讀者加快理解信息的速度。
將數(shù)據(jù)可視化的優(yōu)勢是顯而易見的，我們通過最簡單的方式來傳遞最準(zhǔn)確的信息。通過對于數(shù)據(jù)的分析、處理，加快人們理解信息的速度，最大化地提供數(shù)據(jù)所能夠帶來的價值。
數(shù)據(jù)可視化是對數(shù)據(jù)進行圖形化的處理來進行展示，傳達數(shù)據(jù)背后的價值。而數(shù)據(jù)是對行為的度量結(jié)果，無論是大數(shù)據(jù)還是小數(shù)據(jù)，都可以拆分成兩個部分：類別和度量指標(biāo)。
數(shù)據(jù)分析一般會分為三個步驟：數(shù)據(jù)清洗、數(shù)據(jù)建模、數(shù)據(jù)可視化，這就像烹飪的過程：洗菜切菜、炒菜、上菜擺盤
我們想要提高讀者理解信息的速度，就需要通過對圖表的設(shè)計來提升。圖表類型、配色方式、線條粗細(xì)、字體大小、坐標(biāo)軸高度、標(biāo)題位置、刻度線疏密、圖例的擺放等細(xì)節(jié)都會影響到讀者理解信息的速度，也都有講究的規(guī)定。
早期，工作于AT&T貝爾實驗室的統(tǒng)計學(xué)家William S. Cleveland及Robert McGill曾發(fā)表過《圖像感知：研究圖像化方法的理論、實踐和應(yīng)用》。對于如何根據(jù)功能選擇最佳圖表形式提出了指引。作者設(shè)計了一個包含10項基本感知任務(wù)的列表，每項任務(wù)代表展示數(shù)據(jù)的一種方法并進行了排序。從而給我們在視覺表現(xiàn)方面一些指導(dǎo)性的方向。
我們在優(yōu)化圖表的過程中，有的時候可能并不會因為認(rèn)知判斷準(zhǔn)確性的高低從而確定一個圖表的優(yōu)劣，而是在大多數(shù)情況下對整體的認(rèn)知判斷準(zhǔn)確性進行全局的感知。所以我們在進行數(shù)據(jù)可視化的過程中，既要清楚地認(rèn)識到每種圖表的使用規(guī)則和場景，選用正確的圖表來表現(xiàn)數(shù)據(jù)，也要對其在視覺感知方面進行整體的思考和優(yōu)化（視覺+交互）即，應(yīng)用好GLAD原則。
選擇一個正確的度量值往往是解決問題的關(guān)鍵，現(xiàn)代管理學(xué)之父彼得.德魯克的一條“金句”曾道破度量的重要價值：“如果你不能度量它，就無法改進它”。
如果我們要度量它，就要先認(rèn)識它。
既然我們已經(jīng)深刻地認(rèn)識到可視化圖表的優(yōu)勢所在——簡潔、準(zhǔn)確、突出洞察，以及在可視化大屏中的重要地位，我們就應(yīng)該對于一個完整的圖表有一個全面的認(rèn)識和了解。
什么是好的圖表？一個完整的圖表都由什么元素組成？元素對于讀者理解信息有哪些影響？應(yīng)該避免哪些問題可以提高讀者對于信息的速度？等等問題，都是作為一個可視化大屏設(shè)計師應(yīng)該掌握的基本功。
根據(jù)前文的介紹，我們可以知道對于一個圖表的好壞，可以通過GLAD原則去檢驗。工欲善其事，必先利其器，只有先全面的了解和認(rèn)識圖表的組成元素，才能在設(shè)計時游刃有余。接下來，我們分別介紹一下圖表的組成有哪些。
圖表標(biāo)題，包含標(biāo)題和副標(biāo)題，其中副標(biāo)題是非必須的。
標(biāo)題的主要作用是對圖表的主題進行概述，副標(biāo)題則是對標(biāo)題進行補充說明，或者說明數(shù)據(jù)的來源等，就是為了方便更直觀的了解到圖表主題和內(nèi)容。
從前端開發(fā)的角度來看，標(biāo)題只有一些文字信息，所以標(biāo)題的配置無非是一些定位、字體大小、顏色等，不過也有些標(biāo)題可以加入超鏈接屬性。
所以，我們就可以考慮對標(biāo)題文字的字體、字號、顏色、位置等方面作為優(yōu)化的方向。當(dāng)然如果要同時顯示標(biāo)題和副標(biāo)題時，我們也要考慮到兩者之間的間距。
圖例是圖表中用不同形狀、顏色、文字等，用來標(biāo)示不同數(shù)據(jù)列，通過點擊標(biāo)示可以顯示或隱藏該數(shù)據(jù)列。
2.1 圖例容器樣式
圖例容器指的是整個圖例容器的樣式，包含背景、邊框、邊距、寬度等。
在對圖例的樣式優(yōu)化中，我們可以通過對圖例容器的背景色、邊框顏色、大?。▽?、高）、陰影等方面作為優(yōu)化方向。也可能出現(xiàn)一個圖表中數(shù)據(jù)度量項過多，圖例在整個圖表占比過大的現(xiàn)象，我們也可以采用分頁的形式進行視覺上的減壓，在交互上面進行突破。
2.2 圖例項樣式
圖例容器的樣式可以控制圖例整體樣式，圖例的具體內(nèi)容則是通過圖例項相關(guān)屬性來控制的。我們不僅要考慮到容器的設(shè)計，也要更關(guān)注于圖例項本身。
關(guān)于圖例項的基本樣式，即大小、顏色、圓角等，圖例項可以通過標(biāo)示顏色的不同來代表不同的類別（注：同一組圖例中，盡量避免出現(xiàn)相近的顏色，可以提高圖表信息讀取的速度），還有上邊提到的不同狀態(tài)下的設(shè)計樣式，比如圖例隱藏時的樣式，鼠標(biāo)劃過時的樣式，圖表項在容器中的位置以及之間的相對位置關(guān)系。
2.3 圖例內(nèi)容及定位
圖例內(nèi)容，即表示圖例的文字說明。
圖例在圖表中的對齊方式有左對齊、居中對齊、右對齊，圖例內(nèi)容的布局方式有垂直布局和水平布局。
笛卡爾圖表（普通的二維數(shù)據(jù)圖）都有X軸和Y軸，默認(rèn)情況下，x軸顯示在圖表的底部，y軸顯示在左側(cè)（多個y軸時可以是顯示在左右兩側(cè)）。
3.1 坐標(biāo)軸標(biāo)題
坐標(biāo)軸標(biāo)題。一般情況下，x軸沒有標(biāo)題（一般展示類別），y軸通常是數(shù)據(jù)的度量指標(biāo)。
3.2 坐標(biāo)軸刻度標(biāo)簽
當(dāng)我們的數(shù)據(jù)值相對密集，我們可以通過y軸坐標(biāo)軸標(biāo)簽步進的方式來減少視覺上的壓力。同理如果x軸的數(shù)據(jù)維度也非常多，我們也可以通過步進的方式去進行優(yōu)化。除此之外，這里我們也可以通過交互層面去優(yōu)化，比如可以將x軸的標(biāo)簽設(shè)置為可拖動的。
3.3 坐標(biāo)軸刻度
坐標(biāo)軸的刻度一般我們設(shè)計時比較容易忽略，但是在圖表中我們通常能夠通過這個小小的刻度來確定對映區(qū)間的數(shù)據(jù)值。我們也通過調(diào)整刻度，從而減少視覺的壓力。不過這種調(diào)整，雖然和上面的在“坐標(biāo)軸刻度標(biāo)簽”中的優(yōu)化方法一樣，但是其背后的邏輯是不相同的，前者只是改變了顯示間隔，而后者是真正意義上的調(diào)整刻度。
同時我們在圖表的優(yōu)化過程中，可以對坐標(biāo)軸刻度線的長度、寬度、顏色進行優(yōu)化，也可以對刻度線的位置進行修改，比如是放在刻度標(biāo)簽的下邊，還是在刻度標(biāo)簽的中間。
標(biāo)示線是用來標(biāo)記坐標(biāo)軸上特殊值的一條直線，在繪圖區(qū)內(nèi)繪制一條自定義的線。標(biāo)示線總是垂直于它屬于的軸。它可單獨定義在x軸或y軸，也可以同時定義在x軸和y軸。如果標(biāo)示線同時定義在x軸和y軸，定義在y軸的標(biāo)示線會顯示在前面。
視覺上，我們可以通過對標(biāo)示線的顏色、粗細(xì)、線條樣式（虛線、實線）等進行設(shè)計優(yōu)化，以及標(biāo)簽（標(biāo)示線的文字說明）的位置、顏色等。
標(biāo)示帶同標(biāo)示線，只不過標(biāo)示的內(nèi)容為一段范圍。標(biāo)示帶的作用、事件等很多都類似標(biāo)示線。
導(dǎo)出功能按鈕可增加圖表導(dǎo)出為常見文件功能，一般都是用icon與下拉列表組合使用。常見的導(dǎo)出格式有png、jpeg、svg、pdf等。
數(shù)據(jù)列即圖表上一個或多個數(shù)據(jù)系列，比如曲線圖中的一條曲線，柱狀圖中的一個柱形，也就是我們所見的各種圖表的表現(xiàn)形式。
當(dāng)鼠標(biāo)懸停在某點上時，以框的形式提示該點的數(shù)據(jù)，比如該點的值、數(shù)據(jù)單位等。數(shù)據(jù)提示框內(nèi)提示的信息完全可以通過格式化函數(shù)動態(tài)指定。
版權(quán)標(biāo)簽一般顯示在圖表右下方的包含鏈接的文字，默認(rèn)是自己公司的官網(wǎng)地址。但在大屏展示時，通常會隱藏信息。
前面我們已經(jīng)知道一個完整的圖表都是由哪些元素組成，接下來我們就來認(rèn)識一下圖表都有哪些類型，哪些圖表可以分為一類，我們該如何選擇合適的圖表來進行數(shù)據(jù)可視化。
當(dāng)我們真正去應(yīng)用它的時候，會發(fā)現(xiàn)很多場景不是簡單地按照圖中的思維線就可以找到適合的圖表，甚至事實與指導(dǎo)方向大相徑庭，仍然需要很多客觀的思考與辨證的判斷。如果我們按圖索驥，會發(fā)現(xiàn)其中很多邏輯概念，以專業(yè)的數(shù)據(jù)分析視角來評價是存在紕漏的。
該思維指南圖的核心問題是以“你想展示什么”為起點，這是個極其龐大、復(fù)雜的話題，很難實現(xiàn)面面俱到，這導(dǎo)致“比較、構(gòu)成、聯(lián)系、分布”這四個大類不能構(gòu)成一個完整體，必定有遺漏。例如想要展示異常點、趨勢、聚類、排名，這些是不是也應(yīng)該與四大類并列加入到展示的信息中呢？
而且，“比較”這個詞屬于綜合性概念，所有的圖表都可以稱為數(shù)據(jù)的“比較”，該詞注定與其他類別有重疊的部分。這樣簡單地劃分四個大類顯然違背了數(shù)據(jù)分析領(lǐng)域的基本常識——MECE原則（Mutually Exclusive Collectively Exhaustive）：不重疊、不遺漏。
不過也不能完全否定這張圖表的價值，雖然邏輯上有問題，但該思維指南圖本身是具有設(shè)計性和啟發(fā)性的，我們從中也可以受到一些啟發(fā)，像構(gòu)成、聯(lián)系、分布等很多圖表都有其流行的應(yīng)用場景，如靜態(tài)時間的構(gòu)成常用餅圖，動態(tài)時間的構(gòu)成可以用堆積百分比條形圖，這就好像在咖啡廳、酒吧、婚禮、健身房、辦公室等場景播放音樂，需要先領(lǐng)會不同音樂風(fēng)格——藍調(diào)、爵士、古典、搖滾等，再去配合各種場景靈活使用。
所以，我們還是要回歸我們究竟要展示哪些信息上來，但我們不應(yīng)該被既定的框架束縛住，而是要根據(jù)我們要展示的數(shù)據(jù)來選擇合適的圖表。
選定可視化圖表類型圖表的作用，是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么圖表，需要回答的首要問題是“我有什么數(shù)據(jù)，需要用圖表做什么”，而不是 “圖表長成什么樣”?；A(chǔ)圖表有直線圖、曲線圖、曲線面積圖、面積圖、面積范圍圖、柱狀圖、條形圖、餅圖、散點圖、氣泡圖、儀表圖等。還有一些和股票相關(guān)的圖表類型，包括 K 線、分時圖、蠟燭圖等，以及大數(shù)據(jù)量的時間軸圖表。還有地理信息相關(guān)的地圖，地圖中可以包含地圖區(qū)域、線、點、氣泡等元素。
用于反映事物隨時間或有序類別而變化的趨勢。直線圖是用直線將一系列的數(shù)據(jù)點連接的圖表，直線圖經(jīng)常用來展現(xiàn)隨著時間變化的數(shù)據(jù)。曲線圖是用曲線將一系列的數(shù)據(jù)點連接的圖表。使用建議：Y 軸刻度值選擇要合理，當(dāng)前顯示的數(shù)據(jù)波動要最大化的顯示；顯示數(shù)據(jù)盡量大于3條，否則不能夠清晰地反映出數(shù)據(jù)隨時間變化的趨勢。
包括普通的面積圖及面積范圍圖，根據(jù)面積連接線的不同，又可以分為直線面積圖和曲線面積圖當(dāng)我們在設(shè)計大屏?xí)r出現(xiàn)過多的折線圖，或者感覺圖表與標(biāo)題（設(shè)計復(fù)雜）的樣式不匹配時，我們可以進行豐富圖表的表現(xiàn)力，使用面積圖來撐起畫面，讓畫面整體看上去不單薄。
柱狀圖是用豎直的柱子來展現(xiàn)數(shù)據(jù)，一般用于展現(xiàn)橫向的數(shù)據(jù)變化及對比。條形圖是用橫向的柱子來展現(xiàn)數(shù)據(jù)，一般用于縱向的數(shù)據(jù)排名及對比。
使用建議：注意每個數(shù)據(jù)分類的寬度以及不同分類之間的間距，數(shù)據(jù)之間的間隔與寬度最好是1.2~1.5倍
要選用適當(dāng)?shù)膱A角，避免使用大圓角，會造成認(rèn)知理解混亂，同時也不是很美觀。
當(dāng)每個數(shù)據(jù)分類項文字過長是，可以將柱狀圖轉(zhuǎn)化成條形圖，緩解視覺壓力；這也是條形圖相對于柱狀圖的一個優(yōu)點，同時當(dāng)要展示的數(shù)據(jù)分類項過多時，我們也可以用條形圖來減少圖表所占用的寬度，因為在我們設(shè)計大屏的過程中，圖表的數(shù)據(jù)展示區(qū)域?qū)挾韧枪潭ǖ模粫刑嗟臋M向空間是圖表完全展示，這時我們就可以考慮條形圖。
當(dāng)我們想要強調(diào)其中一個數(shù)據(jù)分類項時，可以使用不同的顏色進行區(qū)分，但此時要保證唯一變量（即顏色不超過兩個）。
餅圖以扇區(qū)的形式顯示每一個數(shù)值相對于總數(shù)值的大小。通過不同的扇面大小，表達了不同類別的比例，即一個數(shù)據(jù)組中不同數(shù)據(jù)項的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例；并通過帶顏色的圖例將扇面和數(shù)據(jù)項一一對應(yīng)起來。所以當(dāng)我們想要一組數(shù)據(jù)中每個數(shù)據(jù)類型所占的比例時，就可以優(yōu)先選擇餅形圖。餅形圖可以分為基礎(chǔ)餅形、環(huán)形圖以及扇形圖。
環(huán)形圖是餅圖的一種變形，通過去掉中心部分，使環(huán)形圖在視覺上看上去更輕盈，避免由于餅圖大面積色塊帶來的視覺壓力，但它依然能夠表達出和餅圖相同的含義以及不同數(shù)據(jù)項之間的占比關(guān)系。在使用環(huán)形圖時，我們要注意環(huán)形圖的粗細(xì)，避免出現(xiàn)圓環(huán)過粗或者過細(xì)的情況，這樣都會影響在視覺上的美觀程度。
通過設(shè)置餅圖圓周的開始角度和結(jié)束角度，我們可以將餅圖變成扇形圖。
范圍圖包括面積范圍圖、曲線面積范圍圖及柱形范圍圖，也可將范圍柱狀圖變成范圍條形圖。
散點圖和氣泡圖常用于展現(xiàn)數(shù)據(jù)的分布情況。通過數(shù)據(jù)之間的位置分布來觀察變量之間的相互關(guān)系。數(shù)據(jù)之間的相互關(guān)系主要分為：正相關(guān)（兩個變量值同時增長）、負(fù)相關(guān)（一個變量呈現(xiàn)增長分布另一個變量呈現(xiàn)下降分布）、不相關(guān)、線性相關(guān)、指數(shù)相關(guān)等。而分布在集群點較遠的數(shù)據(jù)點，被稱之為異常點。散點圖經(jīng)常與回歸線（就是最準(zhǔn)確地貫穿所有點的線）結(jié)合使用，歸納分析現(xiàn)有數(shù)據(jù)以進行預(yù)測分析。
氣泡圖是一種多變量圖表，是散點圖的變體，也可以認(rèn)為是散點圖和百分比區(qū)域圖的組合。與散點圖一樣，氣泡圖使用笛卡爾坐標(biāo)系沿網(wǎng)格繪制點，其中 X 和 Y 軸是單獨的變量。然而，與散點圖不同，每個點都分配有標(biāo)簽或類別（顯示在圖例旁邊或圖例上）。然后，每個繪制點通過其圓的面積表示第三個變量。
顏色還可用于區(qū)分類別或用于表示附加數(shù)據(jù)變量。時間可以通過將其作為一個軸上的變量來顯示，也可以通過動畫數(shù)據(jù)變量隨時間變化來顯示。
氣泡圖通常用于通過使用定位和比例來比較和顯示分類圓圈之間的關(guān)系。氣泡圖的整體情況可用于分析模式/相關(guān)性。太多的氣泡會使圖表難以閱讀，因此氣泡圖的數(shù)據(jù)大小容量有限。
這可以通過交互來解決：單擊或懸停在氣泡上以顯示隱藏信息，可以選擇重新組織或過濾分組類別。與比例面積圖一樣，需要根據(jù)圓的面積而不是半徑或直徑來繪制圓的大小。圓圈的大小不僅會呈指數(shù)級變化，還會導(dǎo)致人類視覺系統(tǒng)產(chǎn)生誤解。
漏斗圖往往展現(xiàn)的是每個階段數(shù)據(jù)的減少情況，例如在銷售中各個階段的流失情況。金字塔圖是由多個塔層組成的金字塔形狀的圖形，其中每個塔層的高度和其點的值有關(guān)。在技術(shù)層面上，金字塔圖是一個倒置的漏斗圖（沒有漏斗頸）。
雷達圖又稱極地圖、蜘蛛圖。雷達圖的 X 軸展現(xiàn)為雷達圖的圓周（即沿著圖形的圓周的是 X 軸），Y 軸則表現(xiàn)為圓心到圓的頂端（即圓的半徑線），即極地圖中的圓周線、半徑線及相關(guān)的文字可以通過坐標(biāo)軸相關(guān)的配置來控制。
雷達圖能直觀地呈現(xiàn)某一個對象多維度的數(shù)據(jù)，幫助我們了解該對象的能力分布情況，常被應(yīng)用于能力評分、用戶畫像等場景。那么什么是多維度呢？即要求數(shù)據(jù)組中的數(shù)據(jù)可以被歸類為多個互相獨立的類目。
雷達圖實際的運用價值，具體可以分兩部分：一是在描述單一對象上的運用，二是在對比多個對象上的運用。使用建議：指標(biāo)得分接近圓心，說明處于較差狀態(tài)，應(yīng)分析改進；指標(biāo)接近圓的頂端，說明度量值越高；數(shù)量控制在5-8個最佳。
瀑布圖是用一系列正負(fù)值的形式表現(xiàn)數(shù)個數(shù)值累計及變化情況，因其形似瀑布流水而得名。
誤差線圖通常表示數(shù)據(jù)的可變范圍、誤差范圍。誤差條可用作圖形增強功能，可將繪制數(shù)據(jù)在笛卡爾圖上的可變性可視化。誤差條可應(yīng)用于散點圖、點圖、條形圖或折線圖等圖表，以提供所呈現(xiàn)數(shù)據(jù)的額外細(xì)節(jié)層。
誤差條有助于指示估計的誤差或不確定性，以大致了解測量的精確度。通常，誤差線用于顯示范圍數(shù)據(jù)集中的標(biāo)準(zhǔn)偏差、標(biāo)準(zhǔn)誤差、置信區(qū)間或最小值和最大值。
為了可視化這些信息，誤差線通過繪制從繪制數(shù)據(jù)點（或帶有條形圖的邊緣）的中心延伸的帶帽尖的線來工作。誤差條的長度有助于揭示數(shù)據(jù)點的不確定性：較短的誤差條表示值集中，表示繪制的平均值更準(zhǔn)確，而較長的誤差條表示值更分散，并且不太可靠。
同樣取決于數(shù)據(jù)的類型，每對誤差條的長度往往在兩側(cè)的長度相同。但是，如果數(shù)據(jù)有偏差，那么每一邊的長度就會不
平衡。誤差線始終平行于定量刻度軸，因此它們可以垂直或水平顯示，具體取決于定量刻度是在 Y 軸還是 X 軸上。如果
有兩個定量標(biāo)尺，則兩對誤差條可用于兩個軸。
徑向條形圖只是在極坐標(biāo)系上繪制的條形圖，而不是在笛卡爾坐標(biāo)系上。雖然它們看起來很酷，但徑向條形圖的問題在
于條形長度可能會被誤解。即使它們代表相同的值，外部的每個條形都相對較長。
這是因為每個條必須有不同的半徑，所以每個條都根據(jù)它的角度來判斷。我們的視覺系統(tǒng)更擅長解釋直線，因此笛卡爾
條形圖是比較值的更好選擇。因此，徑向條形圖主要是為了視覺美觀的原因。
網(wǎng)站鏈接：https://echarts.apache.org/examples/zh/index.html
網(wǎng)站鏈接：https://www.highcharts.com.cn/demo/highcharts
網(wǎng)站鏈接：https://antv-g2.gitee.io/zh/examples/gallery
我們回顧一下，這篇文章主要是講了三個部分：
第一部分主要說明一下什么是數(shù)據(jù)可視化，講的是數(shù)據(jù)可視化基本的原則，就是將具有價值的數(shù)據(jù)和洞察，通過簡潔、準(zhǔn)確、突出洞察的圖表表現(xiàn)出來。以及根據(jù)GLAD原則去評判一個圖表的好壞；
第二部分主要說明了一個圖表的組成都有哪些？從而做為我們可以優(yōu)化圖表的方向；
第三部分主要介紹了一些比較常見的圖表類型，從開發(fā)的角度去考慮實現(xiàn)以及思考如何能夠更好全面地掌握每一個圖表
細(xì)節(jié)。
文章參考
【1】數(shù)據(jù)可視化設(shè)計必修課（一）：圖表篇：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】政務(wù)可視化設(shè)計經(jīng)驗-圖表習(xí)慣：https://tob.design/#/experience/detail/307
【4】參考書籍：《樂見數(shù)據(jù)：商業(yè)數(shù)據(jù)可視化思維》
本文由郝小七指導(dǎo)http://www.woshipm.com/u/917803
本文由 @四月 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
