摘要：也同樣支持配置項(xiàng)聲明構(gòu)成一個(gè)可視化框架需要四部分?jǐn)?shù)據(jù)處理模塊，對(duì)數(shù)據(jù)進(jìn)行加工的模塊，包括一些數(shù)據(jù)處理方法。因此上的同基本相同。總結(jié)起來(lái)，分面其實(shí)提供了兩個(gè)功能按照指定的維度劃分?jǐn)?shù)據(jù)集對(duì)圖表進(jìn)行排版。

G2本身是一門(mén)圖形語(yǔ)法，G2和傳統(tǒng)的圖表系統(tǒng)（HighCharts，ACharts等）不同，G2是一個(gè)基于統(tǒng)計(jì)分析的語(yǔ)義化數(shù)據(jù)可視化系統(tǒng)。它真正做到了讓數(shù)據(jù)驅(qū)動(dòng)圖形，讓你在使用它時(shí)候不用關(guān)心繪圖細(xì)節(jié)，只需要知道你想通過(guò)它怎么展示你關(guān)心的數(shù)據(jù)。echarts更多的是配置options來(lái)顯示圖片，出發(fā)點(diǎn)不同。（g2也同樣支持配置項(xiàng)聲明）

一個(gè)可視化框架需要四部分：

數(shù)據(jù)處理模塊，對(duì)數(shù)據(jù)進(jìn)行加工的模塊，包括一些數(shù)據(jù)處理方法。例如：合并、分組、排序、過(guò)濾、計(jì)算統(tǒng)計(jì)信息等

圖形映射模塊，將數(shù)據(jù)映射到圖形視覺(jué)通道的過(guò)程。例如：將數(shù)據(jù)映射成顏色、位置、大小等

圖形展示模塊，決定使用何種圖形來(lái)展示數(shù)據(jù)，點(diǎn)、線、面等圖形標(biāo)記

輔助信息模塊，用于說(shuō)明視覺(jué)通道跟數(shù)據(jù)的映射關(guān)系，例如：坐標(biāo)軸、圖例、輔助文本等

在數(shù)據(jù)處理模塊上，dataSet主要通過(guò)state狀態(tài)管理多個(gè)dataview視圖，實(shí)現(xiàn)多圖聯(lián)動(dòng)，或者關(guān)聯(lián)視圖。dataView則是對(duì)應(yīng)的是每一個(gè)數(shù)據(jù)源，通過(guò)connector來(lái)接入不同類(lèi)型的數(shù)據(jù)，通過(guò)tranform進(jìn)行數(shù)據(jù)的轉(zhuǎn)換或者過(guò)濾。最后輸出我們理想的數(shù)據(jù)，dataSet是與g2分離的，需要用到的時(shí)候可以加載

在圖形映射模塊上，度量 Scale，是數(shù)據(jù)空間到圖形空間的轉(zhuǎn)換橋梁，負(fù)責(zé)原始數(shù)據(jù)到 [0, 1] 區(qū)間數(shù)值的相互轉(zhuǎn)換工作，從原始數(shù)據(jù)到 [0, 1] 區(qū)間的轉(zhuǎn)換我們稱(chēng)之為歸一化操作。我們可以通過(guò)chart.source或者chart.scale("field", defs)來(lái)實(shí)現(xiàn)列定義，我們可以在這對(duì)數(shù)據(jù)進(jìn)行起別名，更換顯示類(lèi)型（time，cat類(lèi)型等）

輔助信息，就是標(biāo)記數(shù)據(jù)，方便理解數(shù)據(jù)

圖形展示 chart圖表是一個(gè)大畫(huà)布，可以有多個(gè)view視圖，geom則是數(shù)據(jù)映射的圖形標(biāo)識(shí)，就是指的點(diǎn)，線，面，通過(guò)對(duì)其操作，從而展示圖形，

這是大體步驟：

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

負(fù)責(zé)數(shù)據(jù)處理，使得數(shù)據(jù)驅(qū)動(dòng)視圖, 可以包含多個(gè)dataView，每個(gè)view對(duì)應(yīng)一套數(shù)據(jù)

通過(guò)connector接入數(shù)據(jù)（把各種數(shù)據(jù)類(lèi)型轉(zhuǎn)成一定的形式），再通過(guò)transform進(jìn)行過(guò)濾聚合等操作

// 以下是通過(guò)state過(guò)濾數(shù)據(jù)
// step1 創(chuàng)建 dataset 指定狀態(tài)量
const ds = new DataSet({
  state: {
    year: "2010"
  }
});
// step2 創(chuàng)建 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 更新?tīng)顟B(tài)量
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" ], // 展開(kāi)字段集
    key: "key",                   // key字段
    value: "value",               // value字段
    retains: [ "country" ]        // 保留字段集，默認(rèn)為除 fields 以外的所有字段
  });
/*
 dv.rows 變?yōu)?[
  { 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"}
 * ]
 */

就是從數(shù)據(jù)到圖形的轉(zhuǎn)化，使得數(shù)據(jù)在展示的時(shí)候可以自定義
所謂的列定義，即是對(duì)度量 scale 的操作

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

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

視圖，由 Chart 生成和管理，擁有自己獨(dú)立的數(shù)據(jù)源、坐標(biāo)系和圖層，用于異構(gòu)數(shù)據(jù)的可視化以及圖表組合，一個(gè) Chart 由一個(gè)或者多個(gè)視圖 View 組成。

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

g2對(duì)圖形進(jìn)行了抽象，我們通過(guò)對(duì)點(diǎn)，線，面操作使得可以我們可以畫(huà)出各種圖形

也可以自定義shape來(lái)實(shí)現(xiàn)圖形

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

而shape正是自定義形狀，通過(guò)在Shape 上注冊(cè)圖形，實(shí)現(xiàn)自定義 Shape 的功能。
通過(guò)對(duì)點(diǎn)，線，面的描繪實(shí)現(xiàn)自定義圖形

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

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

在這里，你可以進(jìn)行一些針對(duì)坐標(biāo)軸的操作，例如x軸顯示的點(diǎn)的個(gè)數(shù)，坐標(biāo)軸點(diǎn)的間距

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

實(shí)現(xiàn)多Y軸的繪制非常簡(jiǎn)單，用戶(hù)完全不需要做任何配置。只要做到各個(gè) geom 的 X 軸屬性相同，Y 軸屬性不同，G2 就會(huì)為您自動(dòng)生成。

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

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

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

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

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

分為兩種配置

在chart上配置

chart.tooltip(true, cfg); // 開(kāi)啟 tooltip，并設(shè)置 tooltip 配置信息
chart.tooltip(cfg); // 省略 true, 直接設(shè)置 tooltip 配置信息
chart.tooltip(false); // 關(guān)閉 tooltip

在geom對(duì)象上配置，粒度更小

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

支持各種自定義操作，對(duì)于復(fù)雜的場(chǎng)景，可以監(jiān)聽(tīng) chart 對(duì)象上的 tooltip:change 事件，或者通過(guò)回調(diào)進(jìn)行自定義操作

chart.guide()
可以畫(huà)輔助線或者輔助圖案
支持line線，image圖片,html,text等內(nèi)容
通過(guò)chart.guide().line({...})來(lái)使用

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

需要額外引入

Slider 組件是完全基于數(shù)據(jù)的交互組件，同 chart 并無(wú)任何關(guān)聯(lián)，無(wú)論是你的滑動(dòng)條想要操縱多少個(gè) chart 或者 view 都沒(méi)有關(guān)系。其滑動(dòng)時(shí)與圖表的聯(lián)動(dòng)行為，需要同 DataSet 中的狀態(tài)量相結(jié)合，通過(guò)定義每個(gè) Slider 對(duì)象的 onChange 回調(diào)函數(shù)，在其中動(dòng)態(tài)更新 DataSet 的狀態(tài)量來(lái)實(shí)現(xiàn)數(shù)據(jù)過(guò)濾

 // !!! 創(chuàng)建 slider 對(duì)象
const slider = new Slider({
  container: "slider", 
  start: "2004-01-01",
  end: "2007-09-24",
  data, // !!! 注意是原始數(shù)據(jù)，不要傳入 dv
  xAxis: "date",
  yAxis: "aqi",
  onChange: ({ startText, endText }) => {
    // !!! 更新?tīng)顟B(tài)量
    ds.setState("start", startText);
    ds.setState("end", endText);
  }
});
slider.render(); 

分面，將一份數(shù)據(jù)按照某個(gè)維度分隔成若干子集，然后創(chuàng)建一個(gè)圖表的矩陣，將每一個(gè)數(shù)據(jù)子集繪制到圖形矩陣的窗格中。

總結(jié)起來(lái)，分面其實(shí)提供了兩個(gè)功能：
1.按照指定的維度劃分?jǐn)?shù)據(jù)集；
2.對(duì)圖表進(jìn)行排版。
主要就是降低維度，把數(shù)據(jù)拆分開(kāi)，幫助分析

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

可以自定義animate動(dòng)畫(huà)

const { Animate } = G2;
/**
 * @param  {String} animationType      動(dòng)畫(huà)場(chǎng)景類(lèi)型 appear enter leave update
 * @param  {String} 動(dòng)畫(huà)名稱(chēng)，用戶(hù)自定義即可
 * @param  {Function} 動(dòng)畫(huà)執(zhí)行函數(shù)
 **/
Animate.registerAnimation(animationType, animationName, animationFun);

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

Viser 并不是針對(duì) React 做的適配，它是對(duì) G2 3.0 通用的抽象。通過(guò)基于 Viser 封裝，現(xiàn)在已經(jīng)支持對(duì) React、 Angular 和 Vue 三個(gè)常用框架的深度整合，對(duì)應(yīng)的是 viser-react、viser-ng 和 viser-vue。

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

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

在vue中也類(lèi)似

另外，g2同樣支持配置項(xiàng)聲明的方式編寫(xiě)，通過(guò)編寫(xiě)options來(lái)

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

參考文獻(xiàn)：
https://antv.alipay.com/zh-cn...
https://antv.alipay.com/zh-cn...
https://segmentfault.com/a/11...