摘要：也同樣支持配置項聲明構成一個可視化框架需要四部分數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。因此上的同基本相同。總結起來，分面其實提供了兩個功能按照指定的維度劃分數據集對圖表進行排版。

G2本身是一門圖形語法，G2和傳統的圖表系統（HighCharts，ACharts等）不同，G2是一個基于統計分析的語義化數據可視化系統。它真正做到了讓數據驅動圖形，讓你在使用它時候不用關心繪圖細節，只需要知道你想通過它怎么展示你關心的數據。echarts更多的是配置options來顯示圖片，出發點不同。（g2也同樣支持配置項聲明）

一個可視化框架需要四部分：

數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。例如：合并、分組、排序、過濾、計算統計信息等

圖形映射模塊，將數據映射到圖形視覺通道的過程。例如：將數據映射成顏色、位置、大小等

圖形展示模塊，決定使用何種圖形來展示數據，點、線、面等圖形標記

輔助信息模塊，用于說明視覺通道跟數據的映射關系，例如：坐標軸、圖例、輔助文本等

在數據處理模塊上，dataSet主要通過state狀態管理多個dataview視圖，實現多圖聯動，或者關聯視圖。dataView則是對應的是每一個數據源，通過connector來接入不同類型的數據，通過tranform進行數據的轉換或者過濾。最后輸出我們理想的數據，dataSet是與g2分離的，需要用到的時候可以加載

在圖形映射模塊上，度量 Scale，是數據空間到圖形空間的轉換橋梁，負責原始數據到 [0, 1] 區間數值的相互轉換工作，從原始數據到 [0, 1] 區間的轉換我們稱之為歸一化操作。我們可以通過chart.source或者chart.scale("field", defs)來實現列定義，我們可以在這對數據進行起別名，更換顯示類型（time，cat類型等）

輔助信息，就是標記數據，方便理解數據

圖形展示 chart圖表是一個大畫布，可以有多個view視圖，geom則是數據映射的圖形標識，就是指的點，線，面，通過對其操作，從而展示圖形，

這是大體步驟：

//代碼實現
const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 }
  ]; 
  // G2 對數據源格式的要求，僅僅是 JSON 數組，數組的每個元素是一個標準 JSON 對象。
  // Step 1: 創建 Chart 對象
  const chart = new G2.Chart({
    container: "c1", // 指定圖表容器 ID
    width : 600, // 指定圖表寬度
    height : 300 // 指定圖表高度
  });
  // Step 2: 載入數據源
  chart.source(data);
  // Step 3：創建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
  chart.interval().position("genre*sold").color("genre")
  // Step 4: 渲染圖表

負責數據處理，使得數據驅動視圖, 可以包含多個dataView，每個view對應一套數據

通過connector接入數據（把各種數據類型轉成一定的形式），再通過transform進行過濾聚合等操作

// 以下是通過state過濾數據
// step1 創建 dataset 指定狀態量
const ds = new DataSet({
  state: {
    year: "2010"
  }
});
// step2 創建 DataView
const dv = ds.createView().source(data);
dv.transform({
  type: "filter",
  callback(row) {
    return row.year === ds.state.year;
  }
});
// step3 引用 DataView
chart.source(dv);
// step4 更新狀態量
ds.setState("year", "2012");

// transform例子
const data = [
  { country: "USA", gold: 10, silver: 20 },
  { country: "Canada", gold: 7, silver: 26 }
];
const dv = ds.createView()
  .source(data)
  .transform({
    type: "fold",
    fields: [ "gold", "silver" ], // 展開字段集
    key: "key",                   // key字段
    value: "value",               // value字段
    retains: [ "country" ]        // 保留字段集，默認為除 fields 以外的所有字段
  });
/*
 dv.rows 變為
[
  { key: gold, value: 10, country: "USA" },
  { key: silver, value: 20, country: "USA" },
  { key: gold, value: 7, country: "Canada" },
  { key: silver, value: 26, country: "Canada" }
]
 */

// connector例子
const testCSV = `Expt,Run,Speed
 1,1,850
 1,2,740
 1,3,900
 1,4,1070`;

const dv = new DataSet.View().source(testCSV, {
  type: "csv"
});

console.log(dv.rows);
/*
 * dv.rows:
 * [
 *   {Expt: " 1", Run: "1", Speed: "850"}
 *   {Expt: " 1", Run: "2", Speed: "740"}
 *   {Expt: " 1", Run: "3", Speed: "900"}
 *   {Expt: " 1", Run: "4", Speed: "1070"}
 * ]
 */

就是從數據到圖形的轉化，使得數據在展示的時候可以自定義
所謂的列定義，即是對度量 scale 的操作

列定義上的操作可以理解為直接修改數據源中的數據屬性，因此它會影響坐標軸、tooltip 提示信息、圖例、輔助元素 guide 以及幾何標記的標簽文本 label 的數據內容顯示。

//以下是關于數據映射scale的demo
const data = [
  { month: 0, value: 1 },
  { month: 1, value: 2 },
  { month: 2, value: 3 }
];
chart.scale("month", {
  type: "cat", // 聲明 type 字段為分類類型
  values: [ "一月", "二月", "三月" ], // 重新顯示的值
  alias: "月份" // 設置屬性的別名
});
// 這時候映射的month就變成了 月份：一月
// 這時坐標軸，tooltip等關于month的數據顯示都改變了

視圖，由 Chart 生成和管理，擁有自己獨立的數據源、坐標系和圖層，用于異構數據的可視化以及圖表組合，一個 Chart 由一個或者多個視圖 View 組成。

因此 view 上的 api 同 chart 基本相同。
view繪制的圖形是在chart上的，Tooltip（提示信息）和 Legend（圖例）僅在 Chart 上支持，所以view共用一套tooltip和legentd, 可以進行圖形的疊加展示，如果需要不同圖形完全隔離開的聯動展示，可以再new一個chart，然后通過state聯動起來

g2對圖形進行了抽象，我們通過對點，線，面操作使得可以我們可以畫出各種圖形

也可以自定義shape來實現圖形

// line畫出折線圖，position分別從x軸和Y軸取數據，通過city的不同畫出不同的折線
chart.line().position("month*temperature").color("city");  
//size表示的是點的大小，shape為點的類型
chart.point().position("month*temperature").color("city").size(4).shape("circle").style({
    stroke: "#fff",
    lineWidth: 1
  });

而shape正是自定義形狀，通過在Shape 上注冊圖形，實現自定義 Shape 的功能。
通過對點，線，面的描繪實現自定義圖形

const Shape = G2.Shape;
const shapeObj = Shape.registerShape("geomType", "shapeName", { 
  getPoints(pointInfo) {
    // 獲取每種 shape 繪制的關鍵點
  },
  draw(cfg, container) {
    // 自定義最終繪制的邏輯
  }
});

chart.coord("coordTpye"[, cfg]);主要就是更改坐標系，笛卡爾坐標系（直角坐標系）和 極坐標系，例如通過改成極坐標系來畫餅圖

在這里，你可以進行一些針對坐標軸的操作，例如x軸顯示的點的個數，坐標軸點的間距

chart.axis("xField", {
  line: {
    lineWidth: 2, // 設置線的寬度
    stroke: "red", // 設置線的顏色
    lineDash: [ 3, 3 ] // 設置虛線樣式
  }
});

實現多Y軸的繪制非常簡單，用戶完全不需要做任何配置。只要做到各個 geom 的 X 軸屬性相同，Y 軸屬性不同，G2 就會為您自動生成。

chart.legend({ 
  position: "bottom", // 設置圖例的顯示位置
  itemGap: 20 // 圖例項之間的間距
});

chart.legend("cut", false); // 不顯示 cut 字段對應的圖例

chart.legend("price", {
  title: null // 不展示圖例 title
});

chart.legend(false); //所有的圖例都不顯示

當然，也可以使用html渲染圖例，只需要useHtml:true就可以了

分為兩種配置

在chart上配置

chart.tooltip(true, cfg); // 開啟 tooltip，并設置 tooltip 配置信息
chart.tooltip(cfg); // 省略 true, 直接設置 tooltip 配置信息
chart.tooltip(false); // 關閉 tooltip

在geom對象上配置，粒度更小

chart..tooltip("field1*field2...*fieldN");

支持各種自定義操作，對于復雜的場景，可以監聽 chart 對象上的 tooltip:change 事件，或者通過回調進行自定義操作

chart.guide()
可以畫輔助線或者輔助圖案
支持line線，image圖片,html,text等內容
通過chart.guide().line({...})來使用

label在geom上調用
chart.point().position(x*y).label("x", {})

需要額外引入

Slider 組件是完全基于數據的交互組件，同 chart 并無任何關聯，無論是你的滑動條想要操縱多少個 chart 或者 view 都沒有關系。其滑動時與圖表的聯動行為，需要同 DataSet 中的狀態量相結合，通過定義每個 Slider 對象的 onChange 回調函數，在其中動態更新 DataSet 的狀態量來實現數據過濾

 // !!! 創建 slider 對象
const slider = new Slider({
  container: "slider", 
  start: "2004-01-01",
  end: "2007-09-24",
  data, // !!! 注意是原始數據，不要傳入 dv
  xAxis: "date",
  yAxis: "aqi",
  onChange: ({ startText, endText }) => {
    // !!! 更新狀態量
    ds.setState("start", startText);
    ds.setState("end", endText);
  }
});
slider.render(); 

分面，將一份數據按照某個維度分隔成若干子集，然后創建一個圖表的矩陣，將每一個數據子集繪制到圖形矩陣的窗格中。

總結起來，分面其實提供了兩個功能：
1.按照指定的維度劃分數據集；
2.對圖表進行排版。
主要就是降低維度，把數據拆分開，幫助分析

chart.facet("list", {
  fileds: [ "cut", "carat" ],
  padding: 20 // 各個分面之間的間距，也可以是數組 [top, right, bottom, left]
});

可以自定義animate動畫

const { Animate } = G2;
/**
 * @param  {String} animationType      動畫場景類型 appear enter leave update
 * @param  {String} 動畫名稱，用戶自定義即可
 * @param  {Function} 動畫執行函數
 **/
Animate.registerAnimation(animationType, animationName, animationFun);

antv g2也提供了高層封裝，BizCharts和Viser
BizCharts 地址：https://alibaba.github.io/Biz...
Viser 地址：https://viserjs.github.io/

Viser 并不是針對 React 做的適配，它是對 G2 3.0 通用的抽象。通過基于 Viser 封裝，現在已經支持對 React、 Angular 和 Vue 三個常用框架的深度整合，對應的是 viser-react、viser-ng 和 viser-vue。

viser在react的使用，類似于新版的react-router，一切皆是組件

export default class App extends React.Component {
  render() {
    return (
      
        
        
        
        
      
    );
  }
}

在vue中也類似

另外，g2同樣支持配置項聲明的方式編寫，通過編寫options來

如果有錯誤的地方，歡迎指出~~~
感謝收看~~

參考文獻：
https://antv.alipay.com/zh-cn...
https://antv.alipay.com/zh-cn...
https://segmentfault.com/a/11...