可視化框架設計-圖表類型

目錄

• 圖形標記和圖表類型
• 圖表類型(Geom)和圖形形狀
• 如何設計圖形形狀(Shape)
• 更多

圖形標記和圖表類型

數據可視化的核心在於可視化編碼，而可視化編碼由圖形標記和視覺通道組成，視覺通道在前面的章節中已經講解過，本章的內容是介紹圖形標記，在可視化設計中我們將常見的圖形標記定義成圖表類型。

根據圖形標記可以代表的數據維度來划分，圖形標記分為：

• 零維，點是常見的零維圖形標記，點僅有位置信息
• 一維，常見的一維圖形標記有線
• 二維，二維平面
• 三維，常見的立方體、圓柱體都是三維的圖形標記

圖形標記自由度

前面我們介紹過坐標系，坐標系代表了圖形所在的空間維度，而圖形空間的自由度是在不改變圖形性質的基礎下可以自由擴展的維度，自由度 = 空間維度 - 圖形標記的維度，那么：

• 點在二維空間內的自由度是2，就是說可以沿x軸、y軸方向進行擴展
• 線在二維空間內的自由度是1，也就說線僅能增加寬度，而無法增加長度
• 面在二維空間內的自由度是0，我們以一個多邊形為示例，在不改變代表多邊形的數據前提下，我們無法增加多邊形的寬度或則高度
• 面在三維空間的自由度是1，我們可以更改面的厚度

圖形標記的自由度與數據能夠映射到圖形的視覺通道size（大小）相關，這個角度上來講：

• 點可以映射兩個數據字段字段到點的大小上（當然現實中我們僅僅映射一個）
• 線可以映射一個數據字段字段到線的寬度
• 柱狀圖的矩形可以映射一個數據字段到寬度上
• 封閉的多邊形無法使用數據映射到大小

圖表類型

我們根據圖形本身的維度和其自由度將圖形標記在可視化框架中的實現進行了分類：

• point（點圖）,雖然點的自由度是2，但是我們一般只映射一個字段到點的size上，x軸和y軸方向同時擴展大小
• path(路徑圖)、line(線圖)，x軸方向上無序的的線是path,x軸方向有序的線是線圖，線圖又分為折線圖和曲線圖
• area(區域圖)，填充折線和x軸閉合的區域，構建成為區域圖，區域圖是二維的，其自由度是0，無法進行size的擴展
• interval(區間圖）、常見的柱狀圖、玫瑰圖、餅圖都是區間圖，其圖形是以y軸方向的長度表示數據的大小，x軸方形可以自由擴展，其自由度是1
• polygon(多邊形），多個點構建的封閉的多邊形，自由度是0，無法進行size的擴展
• heatmap（熱力圖）,熱力圖使用顏色來代表數據分布，繪制的過程根據數據點在畫布上的影響范圍進行顏色的設置，其自由度是2，但是我們往往只指定一個常量字段，指定點的影響范圍
• contour(等高線），一種特殊的封閉的線圖，可以設置線的粗細，也可以填充其空間變成等高區域圖，這是無法進行size 的擴展
• schema （自定義），無法被上面覆蓋的圖形標記都放到這個分類下，常見的k線圖，箱型圖，其自由度與其表達的數據相關

各個圖表的細節實現，在后面有各自的章節專門介紹。

圖表類型和和圖形形狀

我們說圖表類型是圖形標記在可視化框架中的一種實現方式，這是一種非常粗粒度的划分，對於每一種圖表類型來說，圖形在繪制的時候有不同的形狀，視覺通道跟圖形屬性的映射方式不一樣也會生成不同的圖形：

• 點圖，可以使用圓點、三角形、正方形、十字符號等表示點
• 線圖，可以有折線、曲線、點線等
• 多邊形，可以是實心的多邊形，也可以是空心的僅有邊框的多邊形

這就產生了我們在前面提到的視覺通道中Shape（圖形形狀），圖形形狀決定了各個視覺通道和圖形屬性的映射，使用邊框顏色還是填充顏色、使用點線還是實線，使用平滑線還是折線，都是由圖形形狀Shape決定的。

Shape是G2中最靈活、內容最豐富的模塊，下圖是各個圖表的shape實現：

geom 類型	shape 類型	解釋
point	'circle','square','bowtie','diamond','hexagon','triangle','triangle-down', 'hollowCircle','hollowSquare','hollowBowtie','hollowDiamond', 'hollowHexagon','hollowTriangle','hollowTriangle-down', 'cross','tick','plus','hyphen','line'	hollow開頭的圖形都是空心的
line	'line','smooth','dot','dash','dotSmooth','spline'	dot ：點線，smooth： 平滑線
area	'area','smooth','line','dotLine','smoothLine','dotSmoothLine'	[area]和[smooth]是填充內容的區域圖，其他圖表是空心的線圖
interval	'rect','hollowRect','line','tick','stroke'	[hollowRect]是空心的矩形， [line]和 [tick] 都是線段,stroke：帶邊框的矩形
polygon	'polygon','hollow','stroke'	polygon：多邊形、hollow：空心多邊形和 stroke：帶邊框的多邊形
schema	'box','candle'	目前僅支持箱須圖、K線圖

如何設計Shape

對於每個Shape的實現，我們需要確定以下內容：

• 支持的視覺通道
• 映射到各個視覺通道的數據格式
• 圖形對應的數據條數
• 圖形的點的個數

支持的視覺通道

不同的Shape支持的視覺通道不同，以G2實現的視覺通道為例：

• position(位置），所有的圖表類型的Shape都支持這個屬性
• color(顏色）， 所有的圖表類型的Shape都支持這個屬性，但是映射到圖形的邊框還是填充圖形，由各個Shape自己決定
• size(大小），由上面介紹的圖形標記的自由度決定
• opacity(透明度），跟顏色類似

接收的數據格式

對於G2來說，接收的數據都是標准的JSON數組，單條數據字段的格式支持2種類型：

• 數值、字符串等標量值
• 數組，多個標量值構成的數組

所以對於一個Shape來說需要定義好各個視覺通道支持的數據字段格式，下面的示例說明這個問題

柱狀圖

柱狀圖是圖表類型interval的一個Shape ‘rect’定義的，各個視覺通道支持的數據格式：

• position 支持3種數據類型：

  • x，y都是單個標量值，如 {name: '分類一',value: 100}
  • x是單個標量值，y是一個數組 ，如 {name: '分類一',range: [10, 100]}
  • x是數組，y是單個標量值，例如學生成績分布 {score: [60,70],count: 90}

  

• color 僅支持一個標量值字段

• size 僅支持數字標量值
• opacity 支持數字標量值，范圍 0-1

各個圖形對數據格式的支持，我們在后面章節中一一介紹。

需要的數據條數

數據映射到圖形時，數據跟圖形的對應關系對於不同的圖表類型（數據標記）來說各不相同：

• point(點圖）， 點圖的數據條數和圖形的對應關系，可以是1：1,也可以是1:n。如果對應位置的映射字段x,y都是單個標量，那么就是1：1,如果y是數組，那么就是1:n。

    // 1: 1的數據 var data = [{month: '一月', temperature: 10} , {month: '二月', temperature: 15}] // 1: 2的數據 var data = [{month: '一月', temperature: [0,10]} , {month: '二月', temperature: [5,15]}] 

  

• line（線圖）和path(路徑圖），如果對應位置的映射字段x,y都是單個標量多條記錄對應一條線,對應關系是n:1。如果y是數組，那么會生成多條記錄對應關系是 n: n。同上面point的數據：

  

• interval 一條記錄生成一個圖形，1:1

  

• area(區域圖）， 多條數據生成一個圖形，無論對應位置的對應字段的格式如何

  

• polygon，一條數據對應一個圖形, 1: 1。

• heatmap，多條記錄生成一張圖 n: 1
• contour, 多條記錄生成多條等高線 m: n

需要的點的個數

繪制圖形時，需要根據當前的數據生成圖形的點，然后使用線或者弧連接起來，不同的圖形需要點的個數不同:

• point，點圖繪制時只需要一個點即可
• line,path，繪制折線圖/路徑圖時需要折線圖上的多個點
• area，繪制區域圖時，需要代表數據的點與x軸上點
  

• interval,繪制柱狀圖、玫瑰圖、餅圖時，需要知道四個頂點
  

• polygon，繪制多邊形時，每個頂點都需要一個點

• heatmap，繪制熱力圖時需要多個點
• contour，繪制等高線時也需要多個點

更多的細節，也會在對應的圖表類型章節中介紹。

更多

本章概述介紹了圖表類型和圖形形狀，接下來的章節介紹每一種圖表類型，以及其對應的圖形形狀。在介紹具體的圖表類型前，我們先來講解一下為了使得數據到圖形的映射更容易理解，對數據進行的調整，下一章節數據調整。你也可以跳過從最簡單的點圖開始。

 

G2: https://g2.alipay.com