2019-11-18:
學習內容：
一、基本概念：
坐標軸 AXES：
每個圖表通常包含兩個坐標軸，在直角坐標系（笛卡爾坐標系）下，分別為 x 軸和 y 軸，在極坐標軸下，則分別由角度和半徑 2 個維度構成。
每個坐標軸由坐標軸線（line）、刻度線（tickLine）、刻度文本（label）、標題（title）以及網格線（grid）組成。
幾何標記（Geometry）：
即我們所說的點、線、面這些幾何圖形
提示信息 TOOLTIP：
當鼠標懸停在某個點上時，會以提示框的形式顯示當前點對應的數據的信息，比如該點的值，數據單位等。數據提示框內提示的信息還可以通過格式化函數動態指定。
輔助標記 GUIDE:
當需要在圖表上繪制一些輔助線、輔助框或者圖片時，比如增加平均值線、最高值線或者標示明顯的范圍區域時
二、創建圖表：
（1）圖表容器：container
// html中： <div id="c1"></div> // 傳入dom id： const chart = new G2.Chart({ container: 'c1', width: 1000, height: 500,
padding: [ 20, 20, 95, 80 ] // 上，右，下，左
}); // 或者傳入dom 的html節點： container: document.getElementById('c1'),
（2）圖表樣式：
-
background：用於設置整個 chart 的圖表背景樣式，包括邊框，背景色，透明度，圓角等；
-
plotBackground：用於設置 chart 繪圖區域的背景樣式，包括邊框，背景色，透明度，圓角等；
-
padding：用於設置邊距，用法同 CSS 中的 padding 屬性相同, [上，右，下，左]；
（3）圖表寬度自適應：
width 參數可以不配置
const chart = new G2.Chart({ container: 'c1', forceFit: true, // 默認false height : 400 });
注意：
-
G2 的圖表是根據父容器的寬度來計算寬度，如果父容器隱藏，則會將寬度計算成 0，顯示父容器時，需要調用一下 chart.forceFit()。
-
僅當瀏覽器的窗口變化時，圖表會重新計算寬度，其他情況下不進行寬度的計算和自適應。
（4）圖表動畫：
默認情況下，G2 的圖表動畫處於開啟狀態，關閉方法：
// 方式一： 設置 animate 屬性 const chart = new G2.Chart({ container: 'c1', width: 800, height : 400, animate: false // 關閉圖表動畫 }); // 方式二： 手動調用 animate 函數 chart.animate(false); // 關閉動畫
三、裝載數據：
（1）裝載
方法一：data屬性傳入
const chart = new G2.Chart({ id: 'c1', width: 600, height: 300, data: [ { x: 'a', y: 1 }, { x: 'b', y: 2 }, ... ] });
方法二：調用 chart.source(data)方法，每個字段的列定義也可以在這里傳入
chart.source(data, { x: { type: 'cat' }, y: { min: 0 } })
（2）數據格式：
i、json 數組：
const data = [ { gender: '男', count: 40 }, { gender: '女', count: 30 } ]; chart.source(data);
ii、dataview 對象：
《三、dataset 數據集包》中敘述
（3）更新數據：
G2 更新數據的方式主要有三種：
-
僅僅是更新圖表的數據
-
清理所有，重新繪制
-
使用 DataView 時的更新
i、僅僅更新data，：
-- 需要馬上更新圖表：使用 chart.changeData(data)
-- 僅僅更新數據而不需要馬上更新圖表：
chart.source(newData);
chart.guide().clear();// 清理guide
chart.repaint();
ii、更新數據時還可以清除圖表上的所有元素，重新定義圖形語法，重新繪制：
chart.line().position('x*y');
chart.render();
chart.clear(); // 清理所有
chart.source(newData); // 重新加載數據
chart.interval().position('x*y').color('z');
chart.render();
四、DataSet：
把數據處理部分從 G2 中完全抽離出來，對數據處理本身進行了進一步的抽象，擴展和優化，從而實現了一個獨立的數據處理模塊 DataSet。 
把數據處理分為兩個大的步驟：數據連接（Connector）和數據轉換（Transform）。Connector 負責導入和歸一化數據（譬如導入 CSV 數據，導入 GeoJSON 數據等），Transform 負責進行各種數據轉換操作（譬如圖布局、數據統計、數據補全等）。
（1）安裝與引用：
npm install @antv/data-set --save
import { View } from '@antv/data-set'; const dv = new View();
（3）功能介紹：
DataSet 主要完成了以下功能：
-
源數據的解析，將 CSV, DSV, GeoJSON 轉成標准的JSON，查看 Connector
-
加工數據，包括 filter, map, fold(補數據) 等操作，查看 Transform
-
統計函數，匯總統計、百分比、封箱 等統計函數，查看 Transform
-
特殊數據處理，包括 地理數據、矩形樹圖、桑基圖、文字雲 的數據處理，查看 Transform
五、scale 度量：
數據空間到圖形空間的轉換橋梁，負責原始數據到 [0, 1] 區間數值的相互轉換工作，從原始數據到 [0, 1] 區間的轉換我們稱之為歸一化操作。
（1）功能：
在 G2 中度量用於完成以下功能：
-
將數據轉換到 [0, 1] 范圍內，方便將數據映射到位置、顏色、大小等圖形屬性；
-
將歸一化后的數據反轉回原始值。例如
分類a轉換成 0.2，那么對應0.2需要反轉回分類a；
-
划分數據，用於在坐標軸、圖例顯示數值的范圍、分類等信息。
（2）度量類型：
在 G2 中我們按照數值是否連續對數據進行分類：
-
分類（非連續）數據，又分為有序分類和無序分類；
-
連續數據，時間也是一種連續數據類型。
常量 | identity
（3）度量對象的屬性：
{ type: {string}, // 度量的類型 range: {array}, // 數值范圍區間，即度量轉換的范圍，默認為 [0, 1] alias: {string}, // 為數據屬性定義別名，用於圖例、坐標軸、tooltip 的個性化顯示 ticks: {array}, // 存儲坐標軸上的刻度點文本信息 tickCount: {number}, // 坐標軸上刻度點的個數，不同的度量類型對應不同的默認值 formatter: {function}, // 回調函數，用於格式化坐標軸刻度點的文本顯示，會影響數據在坐標軸、圖例、tooltip 上的顯示 }
（4）默認生成度量的機制：
-
查看用戶是否制定了對應字段的數據類型（列定義）
-
如果沒有，判斷字段的第一條數據的字段類型
-
如果數據中不存在對應的字段，則為 'identity'
-
如果是數字則為 'linear'；
-
如果是字符串，判定是否是時間格式，如果是時間格式則為時間類型 'time',
-
否則是分類類型 'cat'
（5）linear：