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

目錄

• 圖形標記和圖表類型
• 圖表類型(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