antv g2的理解總結

G2

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

G2構成

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

• 數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。例如：合併、分組、排序、過濾、計算統計信息等
• 圖形映射模塊，將數據映射到圖形視覺通道的過程。例如：將數據映射成顏色、位置、大小等
• 圖形展現模塊，決定使用何種圖形來展現數據，點、線、面等圖形標記
• 輔助信息模塊，用於說明視覺通道跟數據的映射關係，例如：座標軸、圖例、輔助文本等

1. 在數據處理模塊上，dataSet主要經過state狀態管理多個dataview視圖，實現多圖聯動，或者關聯視圖。dataView則是對應的是每個數據源，經過connector來接入不一樣類型的數據，經過tranform進行數據的轉換或者過濾。最後輸出咱們理想的數據，dataSet是與g2分離的，須要用到的時候能夠加載
2. 在圖形映射模塊上，度量 Scale，是數據空間到圖形空間的轉換橋樑，負責原始數據到 [0, 1] 區間數值的相互轉換工做，從原始數據到 [0, 1] 區間的轉換咱們稱之爲歸一化操做。咱們能夠經過chart.source或者chart.scale('field', defs)來實現列定義，咱們能夠在這對數據進行起別名，更換顯示類型（time，cat類型等）
3. 輔助信息，就是標記數據，方便理解數據
4. 圖形展現 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: 渲染圖表

dataSet

負責數據處理，使得數據驅動視圖, 能夠包含多個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

就是從數據到圖形的轉化，使得數據在展現的時候能夠自定義
所謂的列定義，便是對度量 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的數據顯示都改變了

view

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

所以 view 上的 api 同 chart 基本相同。
view繪製的圖形是在chart上的，Tooltip（提示信息）和 Legend（圖例）僅在 Chart 上支持，因此view共用一套tooltip和legentd, 能夠進行圖形的疊加展現，若是須要不一樣圖形徹底隔離開的聯動展現，能夠再new一個chart，而後經過state聯動起來

geom

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 上註冊圖形，實現自定義 Shape 的功能。
經過對點，線，面的描繪實現自定義圖形

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

coord座標系

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

輔助信息

axis座標軸

在這裏，你能夠進行一些針對座標軸的操做，例如x軸顯示的點的個數，座標軸點的間距

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

實現多Y軸的繪製很是簡單，用戶徹底不須要作任何配置。只要作到各個 geom 的 X 軸屬性相同，Y 軸屬性不一樣，G2 就會爲您自動生成。

legend圖例

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

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

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

chart.legend(false); //全部的圖例都不顯示

固然，也可使用html渲染圖例，只須要useHtml:true就能夠了

tooltip提示信息

分爲兩種配置

• 在chart上配置

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

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

chart.<geom>.tooltip('field1*field2...*fieldN');

支持各類自定義操做，對於複雜的場景，能夠監聽 chart 對象上的 tooltip:change 事件，或者經過回調進行自定義操做

guide輔助元素

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

label圖形文本

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

slider

須要額外引入

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();

facet分面

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

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

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

animate

能夠自定義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 (
      <Chart forceFit height={400} data={data} scale={scale}>
        <Tooltip />
        <Axis />
        <Line position="year*value" />
        <Point position="year*value" shape="circle"/>
      </Chart>
    );
  }
}

在vue中也相似

<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-line position="year*value" />
      <v-point position="year*value" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const scale = [{
  dataKey: 'value',
  min: 0,
},{
  dataKey: 'year',
  min: 0,
  max: 1,
}];

export default {
  data() {
    return {
      data,
      scale,
      height: 400,
    };
  }
};
</script>

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

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

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